Voronoi Cells
NewPro
Slowly drifting Voronoi cells with glowing walls, drawn in a WebGL shader with a canvas 2D fallback for devices without it.
Customize
1
1
1
#ff784f
When to use it
- Hero sections for biotech, materials or science products
- Menus and loading screens for sci-fi games
- A backdrop for a network or infrastructure landing page
Good to know
- Plan
- Pro
- Dependencies
- motion
- Rendering
- WebGL canvas
- Reduced motion
- Respected
- Lines of code
- 503
Installation
Voronoi Cells is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy voronoi-cells.tsx into components/ui and run npm install motion.
Usage
import { VoronoiCells } from "@/components/ui/voronoi-cells";
<section className="relative h-[600px]">
<VoronoiCells color="#ff784f" scale={1.2} glow={1} />
</section>Props
8 properties| Property | Type | Default | Description |
|---|---|---|---|
| color | string | "#ff784f" | Glow color of the cell walls, as a hex value. |
| background | string | "#0c0a09" | Color inside the cells, as a hex value. |
| scale | number | 1 | Cell size. Larger values make bigger cells. |
| speed | number | 1 | Drift speed multiplier. |
| glow | number | 1 | Strength and reach of the glow around the walls, from 0 to 2. |
| interactive | boolean | true | Light up the cells near the pointer. |
| quality | number | 1 | Render resolution from 0.25 to 1. Lower is cheaper. |
| className | string | — | Extra classes for the wrapper. It fills its nearest positioned parent. |
Dependencies: motion