Shaders
header.lightDarkMode D
Gallery

Drifting Lights 6

Drifting Lights

A radial gradient shader effect featuring a bright lime-green center that transitions smoothly outward into cyan and teal tones, ultimately reaching deep blue and dark blue at the edges. The gradient creates a luminous, glowing core effect with soft, feathered transitions between color zones. The RectangularCoordinates component with scale 3 creates a subtle radial distortion pattern that adds depth and dimensionality to the gradient field. A fine film grain texture overlay (strength 0.3) adds subtle noise throughout, creating a slightly textured, atmospheric quality that prevents the gradient from appearing too smooth or artificial. The overall effect suggests a soft light source emanating from the center, with a cool color temperature dominated by blues and greens. The composition is symmetrical and centered, creating a meditative, ethereal atmosphere. The blend mode is normal with full opacity, allowing all components to layer naturally without color manipulation.

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="#66f454" color-b="#0401a7" color-space="oklab" />
    <RectangularCoordinates edges="stretch" :scale="3" />
    <FilmGrain :strength="0.3" />
  </Shader>
</template>