Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/paper-design/shaders/llms.txt

Use this file to discover all available pages before exploring further.

An anti-aliased animated Voronoi diagram using a double-pass edge detection algorithm. Cell centers drift over time driven by sinusoidal motion, and cell colors are drawn from a gradient palette of up to 5 colors. Gap width, glow, and distortion are all adjustable.

​
Usage

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

export default function Example() {
  return (
    <Voronoi
      colors={['#ff8247', '#ffe53d']}
      stepsPerColor={3}
      colorGlow="#ffffff"
      colorGap="#2e0000"
      distortion={0.4}
      gap={0.04}
      glow={0}
      speed={0.5}
      style={{ width: '100%', height: '100%' }}
    />
  );
}

​
Props

​
colors
string[]
default:"[\"#ff8247\",\"#ffe53d\"]"
Array of up to 5 colors distributed across Voronoi cells.
​
stepsPerColor
number
default:"3"
Number of interpolation steps between base colors. Range: 1 to 3.
​
colorGap
string
default:"\"#2e0000\""
Color used for the border/gap between cells.
​
colorGlow
string
default:"\"#ffffff\""
Color tint for the radial inner glow inside cells. Effective when glow is greater than 0.
​
distortion
number
default:"0.4"
Strength of noise-driven displacement of cell centers. Range: 0 to 0.5.
​
gap
number
default:"0.04"
Width of the border between cells. Range: 0 to 0.1.
​
glow
number
default:"0"
Strength of the radial inner shadow/glow inside cells. Range: 0 to 1.
​
speed
number
default:"0.5"
Animation speed multiplier. Set to 0 to pause.
​
frame
number
default:"0"
Static frame position when speed is 0.

​
Presets

NameDescription
DefaultOrange and yellow cells with dark red gaps
LightsNeon-lit cells with pink gaps and strong glow
CellsWhite cells with black gaps and inner glow
BubblesBlue cells with white gaps and full glow

​
Sizing

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