Skip to main content
The Voronoi shader creates an anti-aliased animated cellular pattern with smooth and customizable edges. Features up to 5 colors, optional glow effects, and adjustable gap width. Perfect for creating organic cell patterns, stained glass effects, or abstract geometric animations.

​
Usage

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

function App() {
  return (
    <Voronoi
      colors={['#ff8247', '#ffe53d']}
      stepsPerColor={3}
      colorGlow="#ffffff"
      colorGap="#2e0000"
      distortion={0.4}
      gap={0.04}
      glow={0}
      scale={0.5}
      speed={0.5}
    />
  );
}

​
Parameters

​
colors
string[]
default:"['#ff8247', '#ffe53d']"
Array of base cell colors in hex format. Supports up to 5 colors. Colors are distributed across cells based on their random values.
​
stepsPerColor
number
default:"3"
Number of extra colors between base colors (1 to 3). 1 = N colors, 2 = 2×N colors, etc. Creates posterization effect.
​
colorGlow
string
default:"'#ffffff'"
Color tint for radial inner shadow inside cells in hex format. Effective when glow > 0.
​
colorGap
string
default:"'#2e0000'"
Color used for cell borders/gaps in hex format. Visible when gap > 0.
​
distortion
number
default:"0.4"
Strength of noise-driven displacement of cell centers (0 to 0.5). Creates organic, flowing movement of cells.
​
gap
number
default:"0.04"
Width of the border/gap between cells (0 to 0.1). 0 creates seamless cells, higher values create more pronounced borders.
​
glow
number
default:"0"
Strength of the radial inner shadow inside cells (0 to 1). Creates a gradient from cell edges to centers.
​
speed
number
default:"0.5"
Animation speed multiplier. Controls how fast the cell pattern morphs.

​
Common Sizing Parameters

​
fit
'none' | 'contain' | 'cover'
default:"'cover'"
How to fit the shader into the canvas dimensions.
​
scale
number
default:"0.5"
Overall zoom level (0.01 to 4). Affects the size of cells and is used for anti-aliasing calculations.
​
rotation
number
default:"0"
Rotation angle in degrees (0 to 360).
​
offsetX
number
default:"0"
Horizontal offset (-1 to 1).
​
offsetY
number
default:"0"
Vertical offset (-1 to 1).

​
Presets

​
Default

<Voronoi
  colors={['#ff8247', '#ffe53d']}
  stepsPerColor={3}
  colorGlow="#ffffff"
  colorGap="#2e0000"
  distortion={0.4}
  gap={0.04}
  glow={0}
  scale={0.5}
  speed={0.5}
/>

​
Lights

<Voronoi
  colors={['#fffffffc', '#bbff00', '#00ffff']}
  stepsPerColor={2}
  colorGlow="#ff00d0"
  colorGap="#ff00d0"
  distortion={0.38}
  gap={0.0}
  glow={1.0}
  scale={3.3}
  speed={0.5}
/>

​
Cells

<Voronoi
  colors={['#ffffff']}
  stepsPerColor={1}
  colorGlow="#ffffff"
  colorGap="#000000"
  distortion={0.5}
  gap={0.03}
  glow={0.8}
  scale={0.5}
  speed={0.5}
/>

​
Bubbles

<Voronoi
  colors={['#83c9fb']}
  stepsPerColor={1}
  colorGlow="#ffffff"
  colorGap="#ffffff"
  distortion={0.4}
  gap={0}
  glow={1}
  scale={0.75}
  speed={0.5}
/>

​
Technical Details

  • Max Colors: 5
  • Algorithm: Double-pass Voronoi with edge detection
  • Anti-aliasing: Scale-aware edge smoothing
  • Distortion: Sine wave displacement of cell centers
  • Texture: Requires noise texture for randomization
  • Coordinates: Uses pattern UV coordinates scaled by 1.25
  • Original Algorithm: Based on ldl3W8 shader
  • Note: Small gaps may appear due to natural Voronoi cell border artifacts
The shader creates Voronoi cells by:
  1. Computing the nearest cell center for each pixel (first pass)
  2. Finding the distance to the nearest cell edge (second pass)
  3. Applying sine wave distortion to cell center positions over time
  4. Coloring cells based on their random values with posterization
  5. Adding optional radial glow within cells
  6. Drawing anti-aliased gaps between cells