Shaders

Warp

Installation

npm i @paper-design/shaders-react

Code

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

<Warp
  style={{ height: 500 }}
  proportion={0.45}
  softness={1}
  distortion={0.25}
  swirl={0.8}
  swirlIterations={10}
  shape="checks"
  shapeScale={0.1}
  scale={1}
  rotation={0}
  speed={1}
  colors={[
    "hsl(0, 0%, 7%)",
    "hsl(255, 100%, 72%)",
    "hsl(0, 0%, 7%)",
    "hsl(264, 100%, 61%)"
  ]}
/>

Props

colors

Up to 10 colors in the gradient.

proportion

Balance point for blending colors.

softness

Smoothness of color transitions (0 = hard edge, 1 = soft blend).

distortion

Strength of noise-based distortion.

swirl

Strength of the swirl distortion.

swirlIterations

Number of layered swirl passes.

shape

Base pattern type:
  • checks: Checkerboard.
  • stripes: Even stripes.
  • edge: Two halves split across the canvas.

shapeScale

Zoom level of the base pattern.

scale

Overall pattern zoom.

rotation

Overall pattern rotation angle.

speed

Animation speed.

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