Rolling Shadows 3

A warm, organic gradient shader effect featuring a multi-point gradient system with five color nodes creating a fluid, blended landscape. The composition shows a dominant warm color palette transitioning from deep brown tones on the left side (#40170b) through burnt orange and rust (#963b17, #ff8803) to bright golden-yellow (#ffeeab) and pale cream tones on the right. The gradient points are strategically positioned to create depth: a dark brown anchor in the upper-left quadrant, warm orange-rust tones in the center-left and center areas, a bright golden highlight in the upper-right, and a pale yellow accent in the right-center. A sine wave distortion with 133-degree angle and 0.3 strength creates subtle undulating ripples across the surface, giving it a liquid or fabric-like quality. A bulge distortion centered near the left-center with 2.0 radius and 2.0 falloff creates a gentle spherical warping effect that adds dimensionality. A paper texture overlay with 0.24 displacement and 0.1 roughness at 3x grain scale adds fine surface detail and tactile quality, breaking up the smoothness of the gradients. The overall effect is warm, inviting, and atmospheric with a soft, diffused quality suggesting sunset light or warm ambient illumination. The edges fade to transparency, creating a soft vignette effect.

<script setup lang="ts">
import {
  Shader,
  Bulge,
  MultiPointGradient,
  Paper,
  WaveDistortion
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <MultiPointGradient color-a="#ff8803" color-b="#40170b" color-c="#963b17" color-d="#ffeeab" color-e="#ff9800" :position-a="{ x: 0.61, y: 0.71 }" :position-b="{ x: 0.28, y: 0.66 }" :position-c="{ x: 0.41, y: 0.55 }" :position-d="{ type: 'mouse-position', originX: 0.266, originY: 0.3268206039076377, momentum: 0.2, smoothing: 0.6 }" :position-e="{ x: 0.69, y: 0.39 }" />
    <WaveDistortion :angle="133" />
    <Bulge :center="{ type: 'mouse-position', originX: 0.37, originY: 0.6642984014209592, momentum: 0.3, smoothing: 0.8 }" :falloff="2" :radius="2" />
    <Paper :displacement="0.24" :grain-scale="3" :roughness="0.1" />
  </Shader>
</template>