Rolling Shadows 5

A dynamic gradient shader effect featuring a smooth blend of deep purples, magentas, and dark blues transitioning into vibrant hot pinks and reds. The composition uses a multi-point gradient system with five color nodes positioned strategically across the canvas. The top-right corner anchors a very dark navy-purple (#020818), while the bottom-left features a bright magenta-pink (#e6125a). A secondary bright pink (#ff4488) is positioned as a mouse-tracking element near the center-left, creating an interactive focal point with momentum-based smoothing. The gradient exhibits soft, organic transitions with a smoothness value of 2, creating a liquid, flowing appearance. A subtle wave distortion effect with sine wave pattern (strength 0.3, frequency 1) adds gentle undulation across the entire surface. A bulge effect centered on mouse position creates localized warping with a radius of 2 and falloff of 2, producing a lens-like magnification effect that follows cursor movement with momentum and smoothing. A fine paper texture overlay (displacement 0.24, grain scale 3, roughness 0.1) adds subtle surface detail and tactile quality. The overall mood is modern, energetic, and atmospheric with a dark, moody foundation punctuated by vibrant neon-like accent colors. The effect creates depth through layered distortions and maintains visual interest through interactive mouse-tracking elements.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <MultiPointGradient color-a="#020818" color-b="#e6125a" color-c="#030a1f" color-d="#ff4488" color-e="#1a0a3d" :position-a="{ x: 0.95, y: 0.05 }" :position-b="{ x: 0.12, y: 0.92 }" :position-c="{ x: 0.88, y: 0.88 }" :position-d="{ type: 'mouse-position', originX: 0.15, originY: 0.18, momentum: 0.2, smoothing: 0.6 }" :position-e="{ x: 0.05, y: 0.12 }" />
    <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>