Rolling Shadows 2

A dynamic gradient shader effect featuring a multi-point gradient system with five color nodes creating a complex, flowing color field. The dominant visual elements include deep purples and magentas radiating from the center-right area, transitioning into dark blues and navy tones toward the edges. The primary color node (positioned at approximately 87.4% horizontally, 55.2% vertically) emits a bright magenta/violet glow that serves as the focal point. Secondary color nodes contribute deep indigo (#3d154f) and darker navy (#0c0f33, #0d0d26) tones that frame the composition. A subtle wave distortion with sine wave characteristics (strength 0.3, frequency 1) creates gentle undulating ripples across the entire surface, giving the effect a liquid, breathing quality. A bulge distortion centered near the mouse position (37% horizontally, 66.4% vertically) with a radius of 2 and falloff of 2 adds localized warping and depth. The paper texture overlay with 0.24 displacement and 3x grain scale introduces fine surface detail and organic noise, breaking up the smoothness and creating a tactile, slightly grainy appearance. The overall atmosphere is moody and ethereal, with a strong sense of depth created by the layered color transitions and interactive distortion effects that respond to mouse movement with momentum smoothing.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <MultiPointGradient color-a="#0c0f33" color-b="#0d0d26" color-c="#3d154f" color-d="#7612b5" color-e="#15264f" :position-a="{ x: 0.79, y: 0.09 }" :position-b="{ x: 0.28, y: 0.66 }" :position-c="{ x: 0.4, y: 0.31 }" :position-d="{ type: 'mouse-position', originX: 0.874, originY: 0.5523978685612788, momentum: 0.2, smoothing: 0.6 }" :position-e="{ x: 0.78, y: 0.86 }" />
    <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>