Drifting Lights 5

A smooth, radial gradient shader effect that transitions from vibrant red at the center to warm orange and tan tones in the mid-regions, finally fading to bright lime green at the edges. The gradient flows horizontally with a linear interpolation between red (#bb131c) and green (#82ef77) using OKLab color space, creating smooth intermediate hues of coral and peachy tones. A rectangular coordinate system overlay with 3x scale creates subtle geometric structure and depth perception. The entire composition is softened by a film grain texture at 0.3 strength, adding a subtle noise pattern that creates a cinematic, slightly textured appearance. The effect has a warm-to-cool temperature shift from center to periphery, with the grain providing micro-level detail that prevents the gradient from appearing too flat or artificial. The overall mood is energetic and vibrant, with smooth blending and no harsh edges.

Code

vue

<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="#bb131c" color-b="#82ef77" color-space="oklab" />
    <RectangularCoordinates edges="stretch" :scale="3" />
    <FilmGrain :strength="0.3" />
  </Shader>
</template>