Drifting Lights 7
Drifting LightsA smooth, blended gradient shader effect transitioning from vibrant lime green (#88ce0c) on the left and right edges to a rich magenta-pink (#d168cd) in the center. The gradient flows horizontally with soft, feathered edges that create a seamless color transition across the entire canvas. The effect uses OKLab color space interpolation for perceptually smooth color blending. A subtle film grain texture with 0.3 strength is overlaid across the entire surface, adding a fine, organic noise pattern that prevents the gradient from appearing too synthetic. The rectangular coordinates effect with 3x scale creates a subtle spatial distortion that adds depth and dimension to the otherwise flat gradient. The overall mood is contemporary and ethereal, with the complementary color pairing (green and magenta) creating visual vibrancy while maintaining a soft, diffused appearance. The animation loop on the gradient angle suggests this effect cycles through rotational variations, though the current frame shows a horizontal orientation.
Code
<script setup lang="ts">
import {
Shader,
FilmGrain,
LinearGradient,
RectangularCoordinates
} from 'shaders/vue'
</script>
<template>
<Shader
:disable-telemetry="true"
>
<LinearGradient :angle="{ mode: 'loop', type: 'auto-animate', speed: 1, easing: 'linear', outputMax: 360, outputMin: 0 }" color-a="#d168cd" color-b="#88ce0c" color-space="oklab" />
<RectangularCoordinates edges="stretch" :scale="3" />
<FilmGrain :strength="0.3" />
</Shader>
</template>