Gradient Grid 3

A flowing, organic gradient shader effect with smooth, undulating color transitions. The composition features a dark navy-to-black core in the center-right area, surrounded by soft, blurred gradients of cyan, light blue, and mint green that blend seamlessly into one another. The effect creates a sense of depth and movement, as if viewing luminous liquid or gas flowing through space. The colors transition smoothly without hard edges, with the lighter cyan and green tones appearing to glow and diffuse outward from the darker center. A subtle grid pattern is barely visible underneath, providing minimal texture definition with a 30-cell structure at very low opacity (0.01). Fine film grain adds a slight noise texture throughout, enhancing the organic, atmospheric quality. The overall mood is ethereal and calming, with a modern, digital aesthetic. The distortion value of 0.2 creates gentle warping 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 color-b="#2b7063ff" color-c="#4d8bff" color-d="#35ffb2" color-space="oklab" :distortion="0.2" :seed="30" :visible="true" />
    <Grid blend-mode="linearDodge" :cells="30" :opacity="0.01" :thickness="0.4" />
    <FilmGrain :strength="0.1" />
  </Shader>
</template>