Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/paper-design/shaders/llms.txt

Use this file to discover all available pages before exploring further.

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} />