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.

A single-colored animated spiral that morphs across a wide range of shapes — from crisp, thin-lined geometry to flowing whirlpool forms and wavy, abstract rings. Density controls a perspective-like falloff of the spiral arms, and distortion adds a phase-shift wave along the arms. Noise overlay adds organic variation to the stroke.

​
Usage

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

export default function Example() {
  return (
    <Spiral
      colorBack="#001429"
      colorFront="#79D1FF"
      density={1}
      distortion={0}
      strokeWidth={0.5}
      strokeTaper={0}
      strokeCap={0}
      noise={0}
      noiseFrequency={0}
      softness={0}
      speed={1}
      style={{ width: '100%', height: '100%' }}
    />
  );
}

​
Props

​
colorBack
string
default:"#001429"
Background color.
​
colorFront
string
default:"#79D1FF"
Foreground (spiral ink) color.
​
density
number
default:"1"
Spacing falloff that simulates perspective. 0 = flat spiral, 1 = maximum density falloff. Range: 0 to 1.
​
distortion
number
default:"0"
Power of wave-based shape distortion along the spiral arms. Range: 0 to 1.
​
strokeWidth
number
default:"0.5"
Thickness of the spiral curve. Range: 0 to 1.
​
strokeTaper
number
default:"0"
Stroke width taper along the spiral. Positive = fades away from center, negative = grows away from center, 0 = uniform. Range: -1 to 1.
​
strokeCap
number
default:"0"
Extra stroke width at the center. Has no effect when strokeWidth is 0.5. Range: 0 to 1.
​
noise
number
default:"0"
Noise distortion applied over the canvas. Has no effect when noiseFrequency is 0. Range: 0 to 1.
​
noiseFrequency
number
default:"0"
Noise frequency. Has no effect when noise is 0. Range: 0 to 1.
​
softness
number
default:"0"
Edge softness of the spiral stroke. 0 = hard edge, 1 = fully feathered. Range: 0 to 1.
​
speed
number
default:"1"
Animation speed multiplier. Set to 0 to pause.
​
frame
number
default:"0"
Static frame position when speed is 0.

​
Presets

NameDescription
DefaultClean blue spiral on dark navy
JungleNoise-warped green spiral
DropletTapered spiral with noise, pink on white
SwirlLow-density soft-edged swirl

​
Sizing

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