Voronoi

Installation

npm i @paper-design/shaders-react

Code

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

<Voronoi
  style={{ height: 500 }}
  colorGlow="hsl(0, 0%, 100%)"
  colorGap="hsl(0, 100%, 9%)"
  stepsPerColor={3}
  distortion={0.4}
  gap={0.06}
  glow={0}
  scale={0.5}
  rotation={0}
  speed={0.5}
  colors={[
    "hsl(19, 100%, 64%)",
    "hsl(52, 100%, 62%)"
  ]}
/>

Props

colors

Colors used for the effect.

colorBack, colorGlow

Background and glow colors.

stepsPerColor

Discrete color steps between colors.

distortion

Max distance the cell center moves away from regular grid.

gap

Width of the stroke between the cells.

glow

Radial glow around each cell center.

scale

Overall pattern zoom.

rotation

Overall pattern rotation angle.

speed

Animation speed.

Description

Double-pass Voronoi pattern cell edges.