Swirling Gradient 4

A dynamic shader effect featuring concentric swirling patterns with smooth, flowing curved lines radiating from the center. The composition displays alternating bands of cyan/turquoise (#3ce9bc) and deep purple (#5823df) that create a mesmerizing spiral motion. The lines are soft and blurred with a gradient transition between colors, creating a sense of depth and movement. The effect has a subtle paper texture overlay that adds fine grain detail throughout. The swirl pattern appears to rotate and pulse with momentum-based animation, creating a hypnotic, fluid appearance. The edges fade to transparency, and the overall mood is modern, energetic, and ethereal with a smooth, organic quality. The concentric rings create a tunnel-like perspective that draws the eye toward the center, while the color gradient transitions smoothly across the spectrum from cool cyan on the left to vibrant purple on the right.

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="#3ce9bc" color-b="#5823df" color-space="oklab" :detail="1.2" />
    <ConcentricSpin :center="{ x: 0, y: 0 }" :rings="9" :smoothness="0.76" :speed="-1.2" :speed-randomness="0.14" />
    <Paper :roughness="0.2" />
  </Shader>
</template>