Neon Flow

A vibrant, fluid gradient shader effect featuring smooth color transitions across the entire canvas. The composition is dominated by a large yellow-green radiant glow emanating from the upper-center area, creating a luminous focal point. This central brightness transitions smoothly into surrounding regions of purple, blue, and magenta tones. The Blob component creates organic, flowing shapes with soft edges that appear to pulse and morph, centered slightly above the middle of the canvas. A bright yellow-to-blue gradient blob dominates the upper portion with a subtle white highlight suggesting three-dimensional depth. The Swirl effect adds rotational motion and blending between lime green and violet hues, creating a sense of dynamic movement. Wave distortion at 107 degrees with sine wave patterns introduces subtle undulating ripples across the surface, particularly visible in the color transitions. The overall effect is smooth and dreamlike with soft, feathered edges that fade to transparency at the boundaries. Chromatic aberration adds a subtle color separation effect, particularly noticeable at high-contrast edges where red and blue channels slightly diverge. Film grain adds a fine texture overlay at 12% strength, preventing the image from appearing too perfectly smooth. The color space uses OKLAB and OKLCH for perceptually uniform color transitions, resulting in natural-looking gradients that maintain color harmony throughout the composition.

<script setup lang="ts">
import {
  Shader,
  Blob,
  ChromaticAberration,
  FilmGrain,
  Swirl,
  WaveDistortion
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl :blend="45" color-a="#5edf3c" color-b="#7636ff" color-space="oklab" :detail="1.8" :speed="0.8" />
    <Blob blend-mode="normal-oklab" :center="{ x: 0.54, y: 0.33 }" color-a="#f2ff05" color-b="#0037ff" color-space="oklch" :deformation="0.8" highlight-color="#ffffff" :highlight-intensity="0.3" :highlight-x="0.4" :highlight-y="-0.4" :highlight-z="0.6" :seed="17" :size="0.95" :softness="2" :speed="0.9" />
    <WaveDistortion :angle="107" edges="mirror" :frequency="1.6" :speed="1.8" :strength="0.25" />
    <ChromaticAberration :angle="45" :blue-offset="1.2" :red-offset="-1.2" :strength="0.015" />
    <FilmGrain :strength="0.12" />
  </Shader>
</template>