Swirling Gradient 5

A mesmerizing concentric circular pattern with alternating bands of lavender-gray (#96a0d2) and forest green (#187a4e) that spiral inward toward the center. The effect creates a hypnotic tunnel or vortex appearance with approximately 9 distinct rings that gradually decrease in size as they approach the center point positioned at the bottom-center of the composition. The rings exhibit smooth, flowing curves with subtle blur and soft edge transitions between color bands. A fine paper texture overlay with minimal grain (0.2 roughness) adds subtle tactile quality to the surface. The swirl component introduces organic, fluid distortion with mouse-responsive blending along the x-axis, creating dynamic movement potential. The concentric spin effect rotates counter-clockwise at moderate speed (-1.2), with slight randomness in rotation speed (0.14 speedRandomness) creating natural variation. The overall mood is calm and meditative, with a cool color palette dominated by purples and greens. The composition has perfect radial symmetry with transparent edges that fade smoothly into the background. Lighting appears diffuse and even across the entire surface.

Code

vue

<script setup lang="ts">
import {
  Shader,
  ConcentricSpin,
  Paper,
  Swirl
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl :blend="{ axis: 'x', type: 'mouse', momentum: 0.2, outputMax: 60, outputMin: 40, smoothing: 0.6 }" color-a="#96a0d2" color-b="#187a4e" color-space="oklab" :detail="1.2" />
    <ConcentricSpin :center="{ x: 0.5, y: 1 }" :rings="9" :smoothness="0.76" :speed="-1.2" :speed-randomness="0.14" />
    <Paper :roughness="0.2" />
  </Shader>
</template>