Warp

Animated color fields warped by layered value noise and iterative swirl distortion, applied over a base geometric pattern. The base pattern can be checks, stripes, or a split-edge gradient. Up to 10 colors blend across the result with adjustable distribution, softness, distortion strength, and swirl intensity. Great for fluid, smoky, or marbled effects.

Usage

React
Vanilla JS

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

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

import {
  ShaderMount,
  warpFragmentShader,
  WarpPatterns,
  getShaderNoiseTexture,
} from '@paper-design/shaders';

const container = document.querySelector('#canvas-container');

const shader = new ShaderMount(container, warpFragmentShader, {
  u_colors: [
    [0.071, 0.071, 0.071, 1],
    [0.580, 0.439, 1, 1],
    [0.071, 0.071, 0.071, 1],
    [0.533, 0.220, 1, 1],
  ],
  u_colorsCount: 4,
  u_proportion: 0.45,
  u_softness: 1,
  u_shape: WarpPatterns.checks, // 0
  u_shapeScale: 0.1,
  u_distortion: 0.25,
  u_swirl: 0.8,
  u_swirlIterations: 10,
  u_noiseTexture: getShaderNoiseTexture(),
});

Props

colors

string[]

Array of up to 10 colors blended across the warped field.

proportion

number

default:"0.45"

Blend point between colors. 0.5 = equal distribution. Range: 0 to 1.

softness

number

default:"1"

Color transition sharpness. 0 = hard edge, 1 = fully smooth gradient. Range: 0 to 1.

shape

string

default:"\"checks\""

Base pattern type. One of "checks", "stripes", or "edge".

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. Range: 0 to 1.

swirl

number

default:"0.8"

Strength of the iterative swirl distortion. Range: 0 to 1.

swirlIterations

number

default:"10"

Number of layered swirl passes. Higher values produce more complex swirls. Range: 0 to 20.

speed

number

default:"1"

Animation speed multiplier. Set to 0 to pause.

frame

number

default:"0"

Static frame position when speed is 0.

Pattern options

The WarpPatterns enum provides the available base pattern values:

Key	Value	Description
`checks`	`0`	Sine-wave checkerboard pattern
`stripes`	`1`	Horizontal stripe pattern
`edge`	`2`	Split-edge gradient

Presets

Name	Description
`Default`	Dark purple warp on checks
`Cauldron Pot`	Green and blue bubbling warp
`Live Ink`	Black ink flow on light background
`Kelp`	Green stripe-based kelp motion
`Nectar`	Warm caramel edge-based flow
`Passion`	Deep red spiral on checks

Sizing

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

Get Started

Core Concepts

Shaders

Image Filters

Usage

Props

Pattern options

Presets

Sizing

Get Started

Core Concepts

Shaders

Image Filters

Documentation Index

​Usage

​Props

​Pattern options

​Presets

​Sizing

Usage

Props

Pattern options

Presets

Sizing