Warp

Presets

Installation

npm i @paper-design/shaders-react

Code

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

<Warp
  width={1280}
  height={720}
  colors={["#cc3333", "#cc9933", "#99cc33", "#33cc33"]}
  proportion={0.45}
  softness={1}
  distortion={0.25}
  swirl={0.8}
  swirlIterations={10}
  shape="checks"
  shapeScale={0.1}
  speed={1}
/>

Shader Props

Name	Description	Type	Values
colors	Up to 10 colors in the gradient	`string[]`	Hex, RGB, or HSL color
proportion	Blend point between 2 colors (0.5 = equal distribution)	`number`	0 to 1
softness	Color transition sharpness (0 = hard edge, 1 = smooth gradient)	`number`	0 to 1
distortion	Strength of noise-based distortion	`number`	0 to 1
swirl	Strength of the swirl distortion	`number`	0 to 1
swirlIterations	Number of layered swirl passes (effective with swirl > 0)	`number`	0 to 20
shape	Base pattern type	`enum`	\| `"checks"` \| `"stripes"` \| `"edge"`
shapeScale	Zoom level of the base pattern	`number`	0 to 1

Common Props

Name	Description	Type	Values
speed	Animation speed	`number`	—
frame	Starting animation frame	`number`	—
scale	Overall zoom level of the graphics	`number`	0.01 to 4
rotation	Overall rotation angle of the graphics	`number`	0 to 360
offsetX	Horizontal offset of the graphics center	`number`	-1 to 1
offsetY	Vertical offset of the graphics center	`number`	-1 to 1
width	CSS width style of the shader element	`number \| string`	—
height	CSS height style of the shader element	`number \| string`	—
fit	How to fit the rendered shader into the canvas dimensions	`enum`	\| `"contain"` \| `"cover"`
worldWidth	Virtual width of the graphic before it's scaled to fit the canvas	`number`	—
worldHeight	Virtual height of the graphic before it's scaled to fit the canvas	`number`	—
originX	Reference point for positioning world width in the canvas	`number`	0 to 1
originY	Reference point for positioning world height in the canvas	`number`	0 to 1
minPixelRatio	Minimum pixel ratio to use when rendering the shader	`number`	—
maxPixelCount	Maximum pixel count that the shader may process	`number`	—

Description

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.