Gradient Grid 7

A flowing gradient shader effect dominated by deep blue and dark purple tones creating a dynamic, organic atmosphere. The primary visual element is a smooth, undulating gradient that transitions from very dark navy/black (#0a0015) in the upper left and center areas to lighter blue shades (#3a5c9e, #287ec9) toward the edges. The gradient exhibits subtle wave-like distortions with a distortion value of 0.2, creating soft, organic flowing patterns rather than hard edges. A barely visible grid overlay with 30 cells and 1% opacity adds fine texture detail using linear dodge blending, creating subtle white grid lines that enhance the technical feel without overwhelming the composition. Film grain at 10% strength adds a subtle noise texture throughout, giving the effect a slightly cinematic quality. The overall mood is cool, ethereal, and atmospheric with a sense of depth and movement. The edges fade to transparency, creating a soft vignette effect. The color space uses oklab for smooth, perceptually-uniform color transitions. The composition has a sense of upward motion or rising energy, with darker tones concentrated in the center-right area and lighter blues framing the composition.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <FlowingGradient color-b="#3a5c9e" color-c="#287ec9" color-d="#5b8fb0" color-space="oklab" :distortion="0.2" :seed="34" :visible="true" />
    <Grid blend-mode="linearDodge" :cells="30" :opacity="0.01" :thickness="0.4" />
    <FilmGrain :strength="0.1" />
  </Shader>
</template>