Rolling Shadows 4

A soft, ethereal shader effect featuring a multi-point gradient system with five color nodes creating smooth color transitions across the canvas. The dominant visual elements include a bright, glowing light blue center area that radiates outward, surrounded by darker blue-gray tones at the edges. The gradient flows from deep navy (#2a3d5e) in the upper left, through muted slate blue (#6b8fa3) in the mid-tones, to a bright cyan-white (#a8d4e6) that appears to be driven by mouse position tracking in the upper-center area. A subtle wave distortion with sine wave pattern (strength 0.3, frequency 1) creates gentle undulating ripples across the entire surface, giving it a liquid-like quality. A bulge effect centered near the lower-left area (with mouse-tracking momentum of 0.3) creates a subtle spherical protrusion that adds depth and dimensionality. The bulge has a large radius (2) with smooth falloff (2), creating a soft lens-like distortion. A fine paper texture overlay (displacement 0.24, grain scale 3, roughness 0.1) adds subtle surface detail and tactile quality without overwhelming the smooth gradient. The overall effect is atmospheric and calming, with a dreamlike quality enhanced by the smooth color transitions and gentle motion-based distortions. The edges fade to transparency, creating a vignette-like effect that draws focus toward the luminous center.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <MultiPointGradient color-a="#2a3d5e" color-b="#6b8fa3" color-c="#1e2b45" color-d="#a8d4e6" color-e="#3b5068" :position-a="{ x: 0.15, y: 0.35 }" :position-b="{ x: 0.61, y: 0.82 }" :position-c="{ x: 0.83, y: 0.47 }" :position-d="{ type: 'mouse-position', originX: 0.435, originY: 0.2846975088967972, momentum: 0.2, smoothing: 0.6 }" :position-e="{ x: 0.52, y: 0.69 }" />
    <WaveDistortion />
    <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>