Shaders
header.lightDarkMode D
Gallery

Swirling Gradient 6

Swirling Gradient

A soft, organic swirl effect with concentric circular rings creating a hypnotic spiral pattern. The image features a gradient transition between deep mauve-pink tones (#94315f) and soft sage-green hues (#a3be95), with the colors blending smoothly through an oklab color space. The swirl component creates flowing, curved lines that spiral inward toward the center, while the concentric spin effect overlays 9 rings that rotate at varying speeds with subtle randomness. The rings have a mirror-edge treatment creating symmetrical reflections. A fine paper texture with 0.15 displacement and 0.2 roughness is applied across the entire surface, adding tactile grain and subtle noise that breaks up the smoothness. The overall effect is dreamlike and meditative, with soft focus and gentle blur creating depth. The center point is positioned at the top-center (0.5, 0), drawing the eye upward. The blend axis responds to mouse movement on the x-axis with momentum, creating dynamic responsiveness. The atmosphere is calming and ethereal, with warm mauve-pink dominating the left and right edges while cool sage-green occupies the center and upper regions.

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