Voronoi

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}
    />
  );
}

import { ShaderMount, voronoiFragmentShader } from '@paper-design/shaders';

const container = document.getElementById('container');
const shader = new ShaderMount(
  container,
  voronoiFragmentShader,
  {
    u_colors: [
      [1, 0.51, 0.28, 1],
      [1, 0.9, 0.24, 1]
    ],
    u_colorsCount: 2,
    u_stepsPerColor: 3,
    u_colorGlow: [1, 1, 1, 1],
    u_colorGap: [0.18, 0, 0, 1],
    u_distortion: 0.4,
    u_gap: 0.04,
    u_glow: 0,
    u_noiseTexture: noiseTextureImage,
    // Sizing uniforms
    u_fit: 2,
    u_scale: 0.5,
    u_rotation: 0,
    u_offsetX: 0,
    u_offsetY: 0,
    u_originX: 0.5,
    u_originY: 0.5,
    u_worldWidth: 0,
    u_worldHeight: 0,
  },
  {}, // WebGL context attributes
  0.5 // speed
);

Parameters

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.

number

default:"3"

Number of extra colors between base colors (1 to 3). 1 = N colors, 2 = 2×N colors, etc. Creates posterization effect.

string

default:"'#ffffff'"

Color tint for radial inner shadow inside cells in hex format. Effective when glow > 0.

string

default:"'#2e0000'"

Color used for cell borders/gaps in hex format. Visible when gap > 0.

number

default:"0.4"

Strength of noise-driven displacement of cell centers (0 to 0.5). Creates organic, flowing movement of cells.

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.

number

default:"0"

Strength of the radial inner shadow inside cells (0 to 1). Creates a gradient from cell edges to centers.

number

default:"0.5"

Animation speed multiplier. Controls how fast the cell pattern morphs.

Common Sizing Parameters

'none' | 'contain' | 'cover'

default:"'cover'"

How to fit the shader into the canvas dimensions.

number

default:"0.5"

Overall zoom level (0.01 to 4). Affects the size of cells and is used for anti-aliasing calculations.

number

default:"0"

Rotation angle in degrees (0 to 360).

number

default:"0"

Horizontal offset (-1 to 1).

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:

Computing the nearest cell center for each pixel (first pass)
Finding the distance to the nearest cell edge (second pass)
Applying sine wave distortion to cell center positions over time
Coloring cells based on their random values with posterization
Adding optional radial glow within cells
Drawing anti-aliased gaps between cells

Get Started

Shaders

Guides

Usage

Parameters

Common Sizing Parameters

Presets

Default

Lights

Cells

Bubbles

Technical Details

​Usage

​Parameters

​Common Sizing Parameters

​Presets

​Default

​Lights

​Cells

​Bubbles

​Technical Details

Usage

Parameters

Common Sizing Parameters

Presets

Default

Lights

Cells

Bubbles

Technical Details