Drifting Lights

A smooth, seamless gradient shader effect transitioning diagonally from blue-purple tones in the upper left to cyan-blue tones in the upper right, with deeper purple and magenta hues dominating the center and lower portions. The gradient flows horizontally with a primary color transition from a vibrant purple (#780ff7) to a bright cyan-blue (#3692e7). The effect uses the OKLab color space for smooth perceptual color transitions. A subtle rectangular coordinate grid pattern is overlaid with 3x scale intensity, creating a faint geometric structure beneath the gradient. Fine film grain texture with 0.3 strength is applied across the entire surface, adding a subtle noise pattern that prevents banding and creates a natural, slightly textured appearance. The overall mood is modern and digital, with a soft, glowing quality. The gradient appears to have a looping animation capability with auto-animate enabled, suggesting the angle rotates continuously. The composition is perfectly centered with no rotation, creating a balanced, symmetrical visual effect.

<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="#780ff7" color-b="#3692e7" color-space="oklab" />
    <RectangularCoordinates edges="stretch" :scale="3" />
    <FilmGrain :strength="0.3" />
  </Shader>
</template>