Warp
Installation
npm i @paper-design/shaders-react
Code
import { Warp } from '@paper-design/shaders-react';
<Warp
height={500}
colors={["#cc3333", "#cc9933", "#99cc33", "#33cc33"]}
proportion={0.45}
softness={1}
distortion={0.25}
swirl={0.8}
swirlIterations={10}
shape="checks"
shapeScale={0.1}
scale={1}
rotation={0}
speed={1}
/>
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 |
| width | CSS width style of the shader element | number | string | — |
| height | CSS height style of the shader element | number | string | — |
| scale | Overall zoom level of the graphics | number | 0.01 to 5 |
| rotation | Overall rotation angle of the graphics | number | 0 to 360 |
| speed | Animation speed | number | 0 to 20 |
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.