Gradient Grid

A flowing gradient shader effect featuring a smooth, organic blend of warm and cool colors. The composition displays a diagonal wave-like pattern flowing from the lower left toward the upper right. The gradient transitions seamlessly from deep dark purple (#0a0015) in the lower left corner through vibrant magenta and purple tones (#6b17e6) in the center, to coral-red (#ff4d6a) and warm orange (#ff6b35) in the upper left and right edges. The colors blend with soft, blurred edges creating an ethereal, atmospheric quality. A subtle grid overlay with white lines (30x30 cells at 0.01 opacity) is barely visible, adding fine texture detail without disrupting the smooth gradient flow. Fine film grain noise (0.1 strength) is applied uniformly across the entire surface, creating a subtle cinematic texture that enhances depth and prevents banding. The overall effect has a glowing, neon-like quality with smooth color transitions in OKLCH color space, producing natural-looking gradations. The distortion value of 0.2 creates gentle undulations in the gradient flow, making the effect feel dynamic and alive rather than static.

<script setup lang="ts">
import {
  Shader,
  FilmGrain,
  FlowingGradient,
  Grid
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <FlowingGradient :distortion="0.2" :seed="58" :visible="true" />
    <Grid blend-mode="linearDodge" :cells="30" :opacity="0.01" :thickness="0.4" />
    <FilmGrain :strength="0.1" />
  </Shader>
</template>