Shaders
header.lightDarkMode D
Gallery

Swirling Gradient 10

Swirling Gradient

A dynamic swirl shader effect featuring concentric curved bands that radiate outward in a hypnotic pattern. The primary visual consists of alternating stripes of bright neon green (#01dd06) and deep purple (#7246ad) that flow in smooth, organic curves creating a sense of rotational motion. The swirl pattern originates from the center-left area and expands outward with graceful, wave-like distortions. Overlaid on top is a ConcentricSpin component generating 9 concentric rings that add rhythmic circular structure to the composition, with the rings centered slightly off-center (at coordinates 0, 1). The effect has a subtle paper texture grain applied across the entire surface, creating a tactile, slightly roughened appearance that breaks up the smoothness of the gradients. The edges fade to transparency, and the overall blend mode is normal with full opacity. The color interpolation uses the oklab color space, resulting in perceptually smooth transitions between the vibrant green and purple hues. The combination creates a mesmerizing, almost liquid-like visual with a modern, digital aesthetic that suggests movement and energy despite being a static composition.

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