Shaders
header.lightDarkMode D
Gallery

Swirling Gradient 9

Swirling Gradient

A dynamic swirl shader effect dominated by concentric circular waves emanating from the upper-left area. The primary visual consists of smooth, flowing curved lines that create a tunnel-like or vortex appearance. The color palette transitions between a vibrant crimson red (#cc252b) and deep burgundy/maroon tones (#210611), creating a warm, intense atmosphere. The swirl pattern shows multiple curved bands that flow organically across the canvas with varying opacity levels, creating depth perception. Overlaid on this base is a ConcentricSpin component generating 9 concentric rings that rotate at -1.2 speed, adding rhythmic circular motion and creating a hypnotic, pulsating effect. The rings have a mirrored edge treatment and subtle speed randomness that creates organic variation. A fine paper texture with 0.2 roughness and 0.15 displacement is applied as the topmost layer, adding subtle grain and tactile surface quality that breaks up the smoothness slightly. The overall effect is a mesmerizing, fluid motion with a dark, dramatic mood. The blend mode is normal throughout, and the edges fade to transparency, creating a soft vignette effect. The mouse-controlled x-axis blend with 0.6 smoothing suggests interactive responsiveness to user input, with momentum creating trailing effects.

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