Backgrounds

Voronoi Shatter

Pro

Lit cells that fracture apart under the pointer and knit back together behind it. The seam is drawn from the gap between the two nearest seeds rather than the distance to the nearest one, so it holds an even width right through the vertices where three cells meet — and the shatter displaces the space rather than the seeds, so no cell ever swaps neighbours mid-fracture.

Install

Props

What It Demonstrates

Loop
An animation that repeats, a set number of times or infinitely.
Pulse
A gentle repeating scale or opacity change to draw attention.
Hover effect
Visual change when the cursor moves over an element.
Interpolation / Tween
Generating all the in-between frames between a start and end value, so motion is continuous.
Hardware acceleration
Animating transform and opacity lets the GPU keep motion smooth.
Reduced motion
Respecting the user's prefers-reduced-motion setting by toning down or removing motion.

Related Components

Appears In