Shaders
header.lightDarkMode D
Gallery

Swirling Gradient 7

Swirling Gradient

A dynamic swirl shader effect featuring concentric curved lines radiating from the upper left, creating a hypnotic spiral pattern. The primary color is a vibrant magenta (#f948c3) that dominates the composition, transitioning smoothly into a bright lime green (#81cf39) toward the right edge. The swirl component creates smooth, flowing curved bands that appear to rotate and blend seamlessly. Overlaid on this is a ConcentricSpin effect with 9 rings that adds rhythmic circular patterns with varying speeds, creating a sense of depth and movement. The rings have a mirror edge treatment that reflects the pattern symmetrically. A subtle paper texture with 0.15 displacement and 0.2 roughness is applied across the entire surface, adding fine grain and tactile quality that breaks up the smoothness of the gradients. The color space uses oklab for smooth interpolation between magenta and green. The overall effect is smooth and flowing with a slight grainy texture overlay, creating a modern, energetic aesthetic with warm-to-cool color transitions. The spatial composition suggests movement from left to right, with the swirl lines becoming increasingly vertical as they progress rightward.

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="#f948c3" color-b="#81cf39" 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>