Swatch Rings 5

A dynamic gradient-based shader effect featuring warm autumn tones with layered depth. The composition consists of diagonal vertical bands that transition from deep orange (#e84520) on the left through golden yellow (#d4a017) in the center to coral and salmon pink tones on the right. The linear gradient flows at a 135-degree angle from bottom-left to top-right, creating a sense of movement and dimension. Overlaid on this base are fine diagonal line patterns that create a crosshatch or mesh texture across all surfaces, giving the effect a woven or fabric-like quality. A radial gradient with orange (#ff6622) at 50% opacity adds localized warmth and glow centered around the upper-right quadrant, creating subtle light falloff. The wave distortion effect with sawtooth waveform and 3.9 frequency creates subtle undulating ripples across the surface, particularly visible in how the line patterns bend and flow. Concentric spin rings (5 rings with 45 intensity) emanate from the left-center, adding rotational energy and depth layering. A fine film grain texture at 0.6 strength adds subtle noise throughout, enhancing the organic, textured appearance. Chromatic aberration with red offset of -1 and blue offset of +1 creates minimal color fringing at edges. The overall effect suggests a three-dimensional folded or pleated surface with warm, glowing ambient lighting, evoking autumn leaves, fire, or molten material.

<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="#e84520" color-b="#d4a017" color-space="hsl" :start="{ x: 0, y: 1 }" />
    <RadialGradient :center="{ x: 0.6, y: 0.4 }" color-a="#ff6622" color-b="transparent" color-space="oklch" :opacity="0.5" :radius="0.6" :visible="true" />
    <Grid :cells="40" :opacity="0.7" :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, 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>