Rolling Shadows 7
Rolling ShadowsA smooth, blurred gradient shader effect featuring a multi-point color gradient with soft transitions. The composition displays a cyan/turquoise glow emanating from the left side, transitioning through pink and magenta tones in the center, and deepening into purple and dark blue hues on the right and upper portions. The gradient points create organic, flowing color zones rather than hard edges. A subtle wave distortion effect adds gentle undulation to the color transitions, creating a fluid, liquid-like quality. A bulge distortion centered around the middle-right area creates a subtle lens-like bulging effect that warps the underlying gradients. Fine paper texture grain is applied across the entire surface at low opacity, adding subtle surface roughness and tactile quality without overwhelming the smooth gradient base. The overall effect is atmospheric and ethereal, with soft focus and smooth color blending creating a dreamy, modern aesthetic. The mouse-position tracking on certain gradient points and the bulge center suggests interactive responsiveness to cursor movement.
Code
<script setup lang="ts">
import {
Shader,
Bulge,
MultiPointGradient,
Paper,
WaveDistortion
} from 'shaders/vue'
</script>
<template>
<Shader
:disable-telemetry="true"
>
<MultiPointGradient color-a="#0e4a6b" color-b="#ff2d8a" color-c="#0b2f7a" color-d="#3dffec" color-e="#6916e8" :position-a="{ x: 0.16, y: 0.39 }" :position-b="{ x: 0.61, y: 0.83 }" :position-c="{ x: 0.84, y: 0.52 }" :position-d="{ type: 'mouse-position', originX: 0.445, originY: 0.2891740621346887, momentum: 0.2, smoothing: 0.6 }" :position-e="{ x: 0.52, y: 0.15 }" />
<WaveDistortion :angle="167" />
<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>