Swatch Rings 7

A sophisticated shader effect featuring a layered composition with a dominant purple color palette. The base is a linear gradient transitioning from deep dark-blue (#1a0a3d) at the bottom-left to light lavender (#c4a8f0) at the top-right, angled at 135 degrees. Overlaid on this gradient is a radial gradient centered at coordinates (0.7, 0.8) that emanates violet (#8b5cf6) with 40% opacity, creating a soft glowing hotspot in the upper-right quadrant. A fine white grid pattern with 40 cells and 0.35 opacity creates a subtle mesh texture across the entire surface, providing technical precision and depth. The composition is further enhanced by a sawtooth wave distortion applied at 177 degrees with a frequency of 3.9 and strength of 0.3, creating diagonal rippling patterns that flow across the image with mirror-edge behavior. A concentric spin effect centered at (1, 0) with 5 rings and 45% intensity adds rotational complexity, particularly visible in the right edge. Chromatic aberration with red offset of -1 and blue offset of +1 introduces subtle color fringing along high-contrast edges, creating a slight 3D anaglyph effect. Film grain with 0.6 strength adds analog texture and noise throughout, enhancing the cinematic quality. The overall effect is a modern, tech-forward aesthetic with flowing geometric patterns and a cool purple-to-lavender color temperature.

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