Skip to main content
Animated bands of color twisting and bending, producing spirals, arcs, and flowing circular patterns. Supports up to 10 colors with adjustable twist, center, and noise distortion.

​
React Usage

import { Swirl } from '@paper-design/shaders-react';

export default function MyComponent() {
  return (
    <Swirl
      colorBack="#330000"
      colors={['#ffd1d1', '#ff8a8a', '#660000']}
      bandCount={4}
      twist={0.1}
      center={0.2}
      proportion={0.5}
      softness={0}
      speed={0.32}
      style={{ width: '100%', height: '400px' }}
    />
  );
}

​
Vanilla JavaScript Usage

import { mountSwirl } from '@paper-design/shaders';

const canvas = document.getElementById('myCanvas');
const cleanup = mountSwirl(canvas, {
  colorBack: '#330000',
  colors: ['#ffd1d1', '#ff8a8a', '#660000'],
  bandCount: 4,
  twist: 0.1,
  center: 0.2,
  proportion: 0.5,
  softness: 0,
  speed: 0.32,
});

// Call cleanup() when done

​
Parameters

​
colorBack
string
default:"'#330000'"
Background color in hex format.
​
colors
string[]
default:"['#ffd1d1', '#ff8a8a', '#660000']"
Array of up to 10 stripe colors in hex format.
​
bandCount
number
default:"4"
Number of color bands. Set to 0 for concentric ripples. Range: 0 to 15.
​
twist
number
default:"0.1"
Vortex power controlling the spiral effect. 0 creates straight sectoral shapes. Range: 0 to 1.
​
center
number
default:"0.2"
Distance from the center where swirl colors begin to appear. Range: 0 to 1.
​
proportion
number
default:"0.5"
Blend point between colors, where 0.5 equals equal distribution. Range: 0 to 1.
​
softness
number
default:"0"
Color transition sharpness. 0 creates hard edges, 1 creates smooth gradients. Range: 0 to 1.
​
noise
number
default:"0.2"
Strength of noise distortion. No effect when noiseFrequency is 0. Range: 0 to 1.
​
noiseFrequency
number
default:"0.4"
Frequency of noise distortion. No effect when noise is 0. Range: 0 to 1.
​
speed
number
default:"0.32"
Animation speed multiplier. Set to 0 to pause animation.
​
frame
number
default:"0"
Specific frame to display when speed is 0.

​
Common Sizing Parameters

​
scale
number
default:"1"
Overall zoom level of the graphics. Range: 0.01 to 4.
​
rotation
number
default:"0"
Rotation angle in degrees. Range: 0 to 360.
​
fit
'none' | 'contain' | 'cover'
default:"'contain'"
How to fit the shader into the canvas dimensions.
​
offsetX
number
default:"0"
Horizontal offset of the graphics center. Range: -1 to 1.
​
offsetY
number
default:"0"
Vertical offset of the graphics center. Range: -1 to 1.

​
Presets

The Swirl shader comes with several built-in presets:
  • Default: Red and pink gradient swirl
  • 007: James Bond-inspired gun barrel effect
  • Opening: Warm orange iris opening effect
  • Candy: Bright pastel rainbow swirl
import { Swirl, candyPreset } from '@paper-design/shaders-react';

<Swirl {...candyPreset.params} />