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 twist and bend radially, producing spirals, concentric arcs, and flowing circular patterns. The twist exponent controls how sharply the bands curve toward the center. Simplex noise distortion, band count, and per-color softness give extensive stylistic control.

​
Usage

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

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

​
Props

​
colorBack
string
default:"#330000"
Background color shown outside the swirl.
​
colors
string[]
default:"[\"#ffd1d1\",\"#ff8a8a\",\"#660000\"]"
Array of up to 10 colors cycling across the swirl bands.
​
bandCount
number
default:"4"
Number of color bands. 0 produces concentric ripples. Range: 0 to 15.
​
twist
number
default:"0.1"
Vortex power. 0 = straight sectoral shapes, higher = tightly wound spiral. Range: 0 to 1.
​
center
number
default:"0.2"
How far from the center the swirl colors begin to appear. Range: 0 to 1.
​
proportion
number
default:"0.5"
Blend point between colors. 0.5 = equal distribution. Range: 0 to 1.
​
softness
number
default:"0"
Color transition sharpness. 0 = hard edge, 1 = smooth gradient. Range: 0 to 1.
​
noise
number
default:"0.2"
Strength of simplex noise distortion on the bands. Range: 0 to 1.
​
noiseFrequency
number
default:"0.4"
Frequency of the noise distortion. Has no effect when noise is 0. Range: 0 to 1.
​
speed
number
default:"0.32"
Animation speed multiplier. Set to 0 to pause.
​
frame
number
default:"0"
Static frame position when speed is 0.

​
Presets

NameDescription
DefaultRed swirl bands on dark red
007Classic gun-barrel spiral in black and cream
OpeningSoft warm iris-opening swirl
CandyPastel rainbow candy swirl

​
Sizing

This shader uses ShaderSizingParams. See Sizing and fit for fit, scale, rotation, offsetX, offsetY, originX, originY, worldWidth, and worldHeight props.