Swatch Rings

A mesmerizing concentric circular gradient pattern with multiple nested rings emanating from the bottom center of the composition. The outermost ring features a cyan-to-green linear gradient (from #07c0d1 to #50fb9b) at 135-degree angle, creating a cool-toned outer boundary. Moving inward, successive rings transition through purple, pink, peach, and yellow hues, creating a rainbow-like effect. A yellow radial glow (#ffff00) positioned at the upper-left adds luminous warmth with 50% opacity. The entire composition is overlaid with a fine white grid pattern (40 cells, 0.3 thickness) creating a subtle mesh texture throughout. Wave distortion with sawtooth waveform (frequency 3.9, strength 0.3) creates subtle undulating ripples across the concentric rings, giving them a slightly fluid, organic quality. The ConcentricSpin effect with 5 rings centered at bottom-middle generates the primary circular structure with 45-degree intensity. Chromatic aberration (0.05 strength) introduces minimal color fringing at edges. Film grain (0.6 strength) adds fine noise texture across the entire surface, creating a slightly grainy, analog quality. The overall effect is vibrant, psychedelic, and hypnotic with smooth color transitions and layered visual depth.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <LinearGradient :angle="135" color-a="#07c0d1" color-b="#50fb9b" color-space="oklch" :end="{ x: 1, y: 1 }" :start="{ x: 0, y: 0 }" />
    <RadialGradient :center="{ x: 0.3, y: 0.3 }" color-a="#ffff00" color-b="transparent" color-space="oklch" :opacity="0.5" :radius="0.8" :visible="true" />
    <Grid :cells="40" :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.5, y: 1 }" :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>