Swatch Rings 3

A vibrant abstract shader composition featuring a diagonal linear gradient transitioning from lime-green (#b9dd9b) in the lower-right to deep purple (#441994) in the upper-left. The gradient is overlaid with a fine white grid pattern (40 cells, 0.2 opacity) creating a mesh-like texture across the entire surface. A sawtooth wave distortion effect (frequency 3.9, strength 0.3, angle 90°) creates diagonal linear striations and rippling patterns that flow across the composition, producing a sense of movement and depth. A concentric spin effect centered at coordinates (0.187, 0.204) with 5 rings and 45° intensity creates swirling vortex-like distortions, particularly visible in the upper-left and center areas where purple dominates. The effect generates curved, spiral-like patterns that contrast with the linear wave distortions. A subtle chromatic aberration (strength 0.05 with red offset -1 and blue offset +1) adds slight color fringing at high-contrast edges. Film grain (strength 0.6) provides a grainy, textured overlay throughout, adding analog noise and reducing smoothness. The overall composition creates a dynamic, three-dimensional appearance with layered depth, combining geometric precision (grid) with organic distortion (waves and spin), resulting in a modern, digital aesthetic with retro-futuristic qualities.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <LinearGradient :angle="135" color-a="#b9dd9b" color-b="#441994" color-space="hsl" :end="{ x: 0, y: 1 }" :start="{ x: 0.5, y: 0.5 }" />
    <Grid :cells="40" :opacity="0.2" :thickness="0.3" :visible="true" />
    <WaveDistortion :angle="90" edges="mirror" :frequency="3.9" :speed="2.2" :visible="true" wave-type="sawtooth" />
    <ConcentricSpin :center="{ x: 0.19, y: 0.2 }" :intensity="45" :rings="5" :seed="42" :smoothness="0" :speed="0.4" :speed-randomness="0.7" />
    <ChromaticAberration :strength="0.05" :visible="true" />
    <FilmGrain :strength="0.6" />
  </Shader>
</template>