Swatch Rings 6

A serene, layered shader composition featuring a dominant linear gradient transitioning from teal (#0e8a9e) in the upper left to light mint green (#7dd4a8) in the lower right at a 135-degree angle. The gradient creates a smooth, flowing base with a cool, aquatic aesthetic. Overlaid on this foundation is a subtle radial gradient with warm orange tones (#ffa844) positioned at coordinates (0.7, 0.75), creating a soft, diffused warm accent that blends at 35% opacity, adding depth and visual interest to the cool palette. A fine white grid pattern with 40 cells is applied across the entire composition at 55% opacity, creating a subtle geometric structure that suggests depth and dimensionality, reminiscent of a 3D wireframe or tiled surface. The grid lines are thin (0.3 thickness) and maintain consistent spacing. A wave distortion effect with sawtooth waveform (frequency 3.9, strength 0.3, angle 177 degrees) creates subtle undulating ripples across the surface, giving the impression of water movement or fabric waves. A concentric spin effect centered at the top (0.5, 0) with 5 rings and 45% intensity adds rotational complexity and subtle swirling patterns. Chromatic aberration with minimal strength (0.05) introduces slight color fringing at red and blue channels, adding a contemporary digital aesthetic. Film grain at 60% strength provides texture and analog character throughout. The overall mood is calm, modern, and digital, with a cool color temperature dominated by teals and greens, punctuated by warm orange undertones.

<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="#0e8a9e" color-b="#7dd4a8" color-space="hsl" :end="{ x: 0.5, y: 1 }" :start="{ x: 0.5, y: 0 }" />
    <RadialGradient :center="{ x: 0.7, y: 0.75 }" color-a="#ffa844" color-b="transparent" color-space="oklch" :opacity="0.35" :radius="0.6" :visible="true" />
    <Grid :cells="40" :opacity="0.55" :thickness="0.3" :visible="true" />
    <WaveDistortion :angle="177" edges="mirror" :frequency="3.9" :speed="2.2" :visible="true" wave-type="sawtooth" />
    <ConcentricSpin :center="{ x: 0.5, y: 0 }" :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>