Rolling Shadows 9

A fluid, organic gradient shader effect displaying a multi-point gradient system with five color nodes creating a seamless blend across the canvas. The dominant color palette consists of deep teals and forest greens with accents of bright cyan. The gradient flows from darker forest green tones (#0b3d2e, #0e4a3f, #134f42) in the upper left and lower right regions toward brighter teal and cyan tones (#1a6b5a, #5eebc4) in the center and right areas. The effect features smooth color transitions with a high smoothness value of 2, creating soft, blended edges between color zones. A wave distortion effect with sine wave pattern and 0.3 strength adds subtle undulating movement to the surface, creating a liquid-like quality. A bulge distortion centered near the lower-left area with radius 2 and falloff 2 creates a subtle spherical warping effect that follows mouse position with momentum and smoothing. A paper texture overlay with 0.24 displacement and 0.1 roughness adds fine grain detail and subtle surface irregularity, creating a tactile, slightly weathered appearance. The overall effect is atmospheric and calming, with a sense of depth and movement despite the static nature of the base gradient. The color space is p3-linear, ensuring accurate color representation across the gradient transitions.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <MultiPointGradient color-a="#0b3d2e" color-b="#1a6b5a" color-c="#0e4a3f" color-d="#5eebc4" color-e="#134f42" :position-a="{ x: 0.16, y: 0.38 }" :position-b="{ x: 0.61, y: 0.81 }" :position-c="{ x: 0.82, y: 0.45 }" :position-d="{ type: 'mouse-position', originX: 0.445, originY: 0.2816725978647687, momentum: 0.2, smoothing: 0.6 }" :position-e="{ x: 0.53, 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>