Voronoi
An animated cellular pattern with soft edges, colored cells, gaps, and glow.
Customize
Installation
pnpm dlx shadcn@latest add @vivid-layer/voronoiUsage
Give the parent element an explicit size. The shader fills the available width and height without taking ownership of positioning or page layout.
import { Voronoi } from "@/components/effects/voronoi"
export function VoronoiExample() {
return (
<div className="h-96 overflow-hidden rounded-xl">
<Voronoi />
</div>
)
}API reference
The wrapper adds playback and runtime safeguards while preserving the
complete Paper Voronoi API. This includes its cell, gap, glow, color, motion,
sizing, pixel-ratio, and styling props. See the
Paper Voronoi reference for the full
prop table and accepted ranges.
| Prop | Type | Default | Description |
|---|---|---|---|
playback | "auto" | "always" | "paused" | "auto" | Controls motion policy. Auto pauses for reduced motion and while the shader is outside the viewport. |
width / height | number | string | "100%" | Sets the canvas CSS dimensions. Size the parent element to establish the visible area. |
maxPixelCount | number | 2073600 | Caps the rendered pixel budget. Override only after measuring the target devices. |
Accessibility
The shader is decorative by default: it is hidden from assistive technology and does not receive pointer events. Do not use its color or motion as the only way to communicate information. Verify the contrast of any overlaid content.
playback="auto" honors reduced motion by rendering a stable frame. Use
playback="always" only when continuous motion is essential.
Performance
The default maxPixelCount limits rendering to approximately 1080p, and
automatic playback pauses work once the component is more than 200px outside
the viewport. Prefer one prominent live shader per viewport.
Browser fallback
The component renders a palette-matched CSS background during server rendering and while capability detection runs. It mounts Paper only when WebGL2 is available; unsupported browsers keep the static fallback.
Credits
The rendering engine is Paper Shaders, distributed under the Apache License 2.0. vivid-layer supplies the React adapter, playback policy, fallback, documentation, and Registry packaging; it does not vendor or modify Paper's shader source.