Spray Paint Grid

A dynamic gradient shader effect transitioning from deep blue in the upper left to vibrant magenta and pink tones in the lower right. The composition features a dark navy background (#08071a) overlaid with two sine wave components creating flowing diagonal patterns. A blue sine wave (#1733a3) positioned in the upper-left area creates smooth undulating curves at 144 degrees, while a bright magenta sine wave (#ff006e) positioned center-right generates more pronounced wave patterns at 169 degrees. A sawtooth wave distortion at 210 degrees with 0.71 strength creates a geometric, faceted appearance throughout. The entire effect is unified by a glass tiles pattern with 16 tiles and 0.62 roundness, creating a crystalline, pixelated mosaic structure that fragments the underlying gradients into small cubic/diamond-shaped segments with subtle depth. A diffuse blur with 80 intensity softens and blends the color transitions, creating a dreamy, atmospheric quality. Film grain at 0.07 strength adds subtle texture and noise. The overall mood is cyberpunk and ethereal, with smooth color gradients interrupted by sharp geometric tiling patterns, creating visual tension between fluidity and structure.

<script setup lang="ts">
import {
  Shader,
  DiffuseBlur,
  FilmGrain,
  GlassTiles,
  Sharpness,
  SineWave,
  SolidColor,
  WaveDistortion
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#08071a" />
    <SineWave :amplitude="0.5" :angle="144" blend-mode="normal-oklch" color="#1733a3" :frequency="0.2" :position="{ x: 0.22, y: 0.27 }" :softness="0.55" :speed="0.3" :thickness="0.72" />
    <SineWave :amplitude="0.75" :angle="169" blend-mode="normal-oklch" color="#ff006e" :frequency="0.2" :position="{ x: 0.6, y: 0.51 }" :softness="1" :speed="0.5" :thickness="0.39" />
    <WaveDistortion :angle="210" edges="mirror" :frequency="2.1" :speed="0.3" :strength="0.71" wave-type="sawtooth" />
    <FilmGrain :strength="0.07" />
    <DiffuseBlur edges="mirror" :intensity="80" />
    <GlassTiles :intensity="10" :roundness="0.62" :tile-count="16" />
    <Sharpness :sharpness="1" />
  </Shader>
</template>