Skip to main content
Animated color fields warped by noise and swirls, applied over base patterns (checks, stripes, or split edge). Blends up to 10 colors with adjustable distribution, softness, distortion, and swirl. Great for fluid, smoky, or marbled effects.

​
React Usage

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

export default function MyComponent() {
  return (
    <Warp
      colors={['#121212', '#9470ff', '#121212', '#8838ff']}
      proportion={0.45}
      softness={1}
      distortion={0.25}
      swirl={0.8}
      swirlIterations={10}
      shapeScale={0.1}
      shape="checks"
      speed={1}
      style={{ width: '100%', height: '400px' }}
    />
  );
}

​
Vanilla JavaScript Usage

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

const canvas = document.getElementById('myCanvas');
const cleanup = mountWarp(canvas, {
  colors: ['#121212', '#9470ff', '#121212', '#8838ff'],
  proportion: 0.45,
  softness: 1,
  distortion: 0.25,
  swirl: 0.8,
  swirlIterations: 10,
  shapeScale: 0.1,
  shape: 'checks',
  speed: 1,
});

// Call cleanup() when done

​
Parameters

​
colors
string[]
default:"['#121212', '#9470ff', '#121212', '#8838ff']"
Array of up to 10 gradient colors in hex format. Colors are blended based on the underlying pattern.
​
proportion
number
default:"0.45"
Blend point between colors, where 0.5 equals equal distribution. Range: 0 to 1.
​
softness
number
default:"1"
Color transition sharpness. 0 creates hard edges, 1 creates smooth gradients. Range: 0 to 1.
​
shape
'checks' | 'stripes' | 'edge'
default:"'checks'"
Base pattern type:
  • checks: Checkerboard pattern
  • stripes: Horizontal stripes
  • edge: Split edge pattern
​
shapeScale
number
default:"0.1"
Zoom level of the base pattern. Range: 0 to 1.
​
distortion
number
default:"0.25"
Strength of noise-based distortion applied to the pattern. Range: 0 to 1.
​
swirl
number
default:"0.8"
Strength of the swirl distortion effect. Range: 0 to 1.
​
swirlIterations
number
default:"10"
Number of layered swirl passes. Only effective when swirl > 0. Range: 0 to 20.
​
speed
number
default:"1"
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 Warp shader comes with several built-in presets:
  • Default: Purple and black checkerboard with moderate swirl
  • Cauldron: Green, blue, and dark tones with edge pattern
  • Ink: High contrast black and white with sharp edges
  • Kelp: Organic green stripes with minimal swirl
  • Nectar: Warm golden tones with edge pattern
  • Passion: Deep red and orange with checks pattern
import { Warp, presetInk } from '@paper-design/shaders-react';

<Warp {...presetInk.params} />