Fracture Reveal
Shatter any element into real Voronoi shards from the point you hit, then watch them reassemble with no seam left behind.
About This Effect
A hero image or display plate that genuinely breaks. Strike it anywhere and it splits into a Voronoi shard field generated at that moment: pieces near the impact leave fast and spin hard, distant ones drift, and the fresh edges catch the light as they turn.
Read the full effect overview
Hit it again while it is still in the air and the break compounds. Fling the pointer across it and the whole plate scatters. Then everything comes home on a staggered elastic return, rim first, and the plate closes back up with no visible crack.
The shards are real DOM elements clipped with clip-path over a clone of your own markup, so the thing being broken can be an image, live text, an SVG or a whole composed layout. No canvas, no WebGL, no geometry library, no GSAP plugins.
What's Included
- Runtime Voronoi decomposition written from scratch: ring-distributed seeds, blended Lloyd relaxation and half-plane clipping, with no geometry library
- Distance falloff from the impact point drives five channels at once: throw distance, spin rate, z-depth scale, edge light and how long each shard stays out
- Compounding hits, so hammering the same spot escalates the break instead of repeating it, and a hard fling scatters the whole plate along the drag path
- An elliptical rubber-band leash keeps even the wildest scatter composed inside the frame instead of firing the plate off-screen
- Distance-ordered elastic return that heals the plate from the rim inward and snaps to exact zero, so the seam vanishes completely at rest
- Shards are bounding-box sized with the artwork clone offset back into place, cutting compositor memory by roughly twenty times against full-size shard layers
- Rendered entirely through GSAP quickSetters on a single shared ticker that sleeps the moment every shard is home
- Attach with one data attribute to any element: image, live text, inline SVG or a whole composed layout, with shard count, force and pattern seed set per element
- Keyboard accessible: the plate is focusable and Enter or Space strikes it at a fresh point each press, building the same combo a repeated click does
Perfect For
- Hero sections and campaign posters that want one interaction a visitor will show someone else
- Product and portfolio galleries where an image breaks apart to reveal or transition to the next
- Launch, teaser and countdown pages built around breaking a plate to get at what is behind it
- Agency and studio landing pages needing a signature moment above the fold that survives a screen recording
- 404 and maintenance pages where something worth hitting repeatedly earns the wait
How It Works
The shard field is a real Voronoi diagram computed at run time. Seeds are laid on concentric rings rather than uniformly at random, which gives the radial crack density real glass has, then two blended Lloyd relaxation passes pull each seed part of the way to its cell centroid to remove slivers without flattening that radial character back out. Each cell is found by Sutherland-Hodgman clipping the plate rectangle against the perpendicular bisector to every other seed, which at these counts is faster than building a Delaunay triangulation first.
DOM was chosen over canvas deliberately, and the measured cost is what makes it viable. Each shard is a div sized to its own bounding box, carrying the cell as a clip-path polygon, with a clone of your markup offset back into place inside it; full-plate shards would be simpler and cost roughly twenty times the compositor memory. Polygons are inflated half a pixel from their centroid so neighbours overlap, and every box is snapped to whole pixels, which is what makes the reassembled plate pixel-identical to the original rather than merely close.
One impact number does all the work. A shard's distance from the strike point becomes a falloff that scales its throw speed, its spin, whether it comes toward the viewer or recedes, the opacity of the light-and-shadow gradient along its leading edge, and how long it stays in free flight before the spring takes over. Per-shard random bias, direction skew and leash radius stop the result reading as a tidy expanding ring.
The return is an underdamped spring integrated on the GSAP ticker, offset per shard by that same falloff so the plate heals from the rim inward with one visible overshoot. Below a threshold each shard snaps to exact zero and goes to sleep; when the last one sleeps the ticker is removed entirely, so an idle plate costs nothing. Rendering is five quickSetters per shard plus one for its edge light, and no per-frame clip-path or style-string writes at all.