Swatch Rings 2

A vibrant isometric 3D shader effect featuring geometric rectangular planes arranged in a complex spatial composition. The base gradient transitions diagonally from cyan-blue (#2597da) in the upper left to golden-tan (#a5a456) in the lower right, creating a warm-to-cool color interplay. A white grid overlay with 40 cells and 0.3 thickness creates a wireframe pattern across all surfaces, emphasizing the three-dimensional structure. The wave distortion effect with sawtooth waveform (frequency 3.9, strength 0.3, angle 90°) creates undulating ripples that flow vertically through the grid, causing the linear lines to bend and wave organically. A concentric spin distortion centered at coordinates (1, 0.5) with 5 rings and 45° intensity adds rotational warping, particularly visible in the right portion of the composition. Chromatic aberration with red offset -1 and blue offset +1 introduces subtle color fringing along edges, creating iridescent purple and cyan halos. Film grain with 0.6 strength adds a subtle textured noise overlay, giving the effect a slightly gritty, analog quality. The overall mood is futuristic and psychedelic, with the interplay of geometric precision and fluid distortion creating visual tension. The spatial depth is enhanced by the isometric perspective, making the planes appear to recede into the distance with varying angles of inclination.

<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="#2597da" color-b="#a5a456" color-space="oklch" :end="{ x: 0, y: 0.5 }" :start="{ x: 1, y: 0 }" />
    <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: 1, y: 0.5 }" :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>