Drifting Lights 4

A smooth, radial gradient shader effect transitioning from deep blue (#133688) on the left side to vibrant magenta/pink (#d7147f) on the right side. The gradient flows horizontally across the canvas with a soft, blended transition through purple tones in the center. The effect uses OKLab color space for smooth interpolation between the two primary colors. A subtle film grain texture with 0.3 strength is overlaid across the entire surface, creating a fine, cinematic noise pattern that adds depth and reduces banding. The rectangular coordinate system at 3x scale creates subtle geometric structure beneath the gradient. The overall mood is modern and atmospheric, with a vaporwave-inspired aesthetic. The gradient maintains consistent opacity throughout with no sharp edges, creating a seamless, professional appearance suitable for backgrounds or UI elements.

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