Shatter Type
Click anywhere to crack the pane
Shatter Type
What it is
A word rendered as a pane of glass and fractured into a real Voronoi mosaic. Click anywhere and the shards nearest the impact fly outward, tumbling under gravity with spin and shadow, then drift back and re-fuse into the legible word.
The fracture follows the letterforms: the word is rasterised first, and a fine grid of Voronoi seeds is laid only where the glyphs cover the pane, with a much coarser grid seeding the space around them — so the glass cracks densely across the strokes and into a few big plates elsewhere. Each shard carries its own slice of the letter, sampled from the texture — a real fracture rather than an opacity trick.
Voronoi cells are built here by clipping: for each seed point, the stage rectangle is cut by the perpendicular bisector between that seed and each of its nearest neighbours, and what survives is the cell. That is Sutherland–Hodgman polygon clipping, with no Delaunay triangulation and no geometry library. The physics on top is deliberately simple — velocity, angular velocity and a depth impulse that falls off with distance from the impact — because the fracture pattern is what carries the effect.
Because the seeding is driven by the rasterised word, the crack density follows the strokes: sites land on a fine jittered grid wherever ink covers the pane and on a much coarser one everywhere else, so the letters break into slivers while the background around them stays a few big plates. Tapping the word cycles it — MONTE, SHATTER, GLASS — and each one is rasterised and re-fractured from scratch. The shards carry a depth value through the flight, which is what the shadow and the scale are drawn from, so the glass reads as coming toward you rather than sliding across the page.
How to use it
- Click anywhere to shatter the word.
- Tap the word to cycle: MONTE, SHATTER, GLASS.
- Wait, and the shards return and re-fuse.
More experiments
- Rope Type — Canvas, Physics, Verlet
- Foam — Canvas, Computational Geometry, Physics
- Rolling Shutter — Canvas, Photography, Optics