042
AI ready

Fracture Reveal

£5

Shatter any element into real Voronoi shards from the point you hit, then watch them reassemble with no seam left behind.

advanced
6 more details
clip-pathvoronoipointer-effectsmomentummicro-interaction3d-transforms
Fracture Reveal - GSAP animation effect preview

This demo reads better at your own screen size than in the frame below:

Open the demo in a new tab
Open Fracture Reveal demo in new tab

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

9 items
  • 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

5 use cases
  • 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

4 sections

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 sets how fast it is thrown, how much it spins, 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, offset per shard by that same distance 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 per-frame loop is removed entirely, so an idle plate costs nothing. Rendering is five cheap property writes per shard plus one for its edge light, with no per-frame clip-path or style-string work at all.

Difficulty Advanced
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this effect's demo, 15 September 2026. A measurement of the demo as shipped, not a promise for your page.

Accessibility
100
Best practices
100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Paid effect

Purchase to unlock the code.

Buying Fracture Reveal opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects.

£5 Standard license, unlimited projects

Browse free effects

Documentation

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

2. Add before closing </body> tag:

Code snippet omitted: it ships with the download.

3. Add data-fracture to any element in your <body>:

Code snippet omitted: it ships with the download.

That is the whole integration. The script finds every [data-fracture], moves its contents into a generated plate layer, computes the Voronoi field from the element's rendered size, and wires up pointer, touch and keyboard handling.

Using It With Your Own Design

What the effect needs from your markup: one element carrying data-fracture with a definite rendered size (a width plus a height, an aspect-ratio or a fixed height) and the design you want broken as its children. The element must not be transformed while a break is in progress; the shard field is measured from its layout box, and the script rebuilds it whenever a ResizeObserver sees the box change. Give the element role="button", tabindex="0" and an aria-label if you want the keyboard path, as the demo does.

The one layout rule that matters: everything a shard must reproduce has to live inside the fractured element, not on it. Shards clone the element's contents, so a background, border or padding set on the [data-fracture] element itself is not part of what breaks and stays behind as a ghost of the intact plate. The demo splits this deliberately: .poster-frame is the fractured element and owns only the size and the cast shadow, while .poster sits inside it, position: absolute; inset: 0, and owns the photograph, the scrim and every piece of type. Copy that two-element shape and the effect works with any design.

What is only the demo's styling: everything under the "DEMO: THE PLATE" banner in style.css: .poster-frame, .poster, its photograph and scrim, and all the .poster__* type. Delete all of it. The "Break" pattern switcher is demo chrome too: .showcase-modes in the CSS plus a small inline script in index.html that only stamps data-fracture-shards onto the plate. The effect script never queries the switcher; it watches that attribute and rebuilds the field when it changes, so wire your own controls however you like.

CSS the effect depends on: the "FRACTURE REVEAL - EFFECT CONTRACT" section of style.css must survive a reskin. In particular: position: relative and touch-action: none on [data-fracture] (without the latter, a phone fling scrolls the page and dies in pointercancel); pointer-events: none on .fracture-field (shards fly over other content and must not eat clicks); the opacity: 0 on .is-fractured > .fracture-plate (the original stays in the accessibility tree behind the shards, which is what keeps your text readable to screen readers); overflow: hidden on .fracture-shard__art; and -webkit-user-drag: none on images and links inside the plate, or the browser's native drag cancels a fling mid-gesture.

Two things about the design itself, both learned the hard way. Shards deliberately fly outside the plate's box, so give the effect room in your layout or clip it at a sensible ancestor; the demo sets overflow: clip on html and body because it has no scroll mechanic of its own. And avoid single-pixel hairlines at low alpha in the artwork: every shard rasterises on its own compositor layer, and a 1px line at 0.1 alpha can survive in one shard and vanish in its neighbour, which reads as a broken plate at rest. Anything 2px or above is safe.

Options

All options are per-element data attributes on the [data-fracture] element.

Attribute Values Default Description
data-fracture marker required Makes the element breakable
data-fracture-shards integer 44 Requested shard count. Scaled down with plate area (a phone-sized plate gets a coarser, faster break) and clamped to 12-96. Changing it live rebuilds the field
data-fracture-power number 1 Force multiplier for every strike. 0.6 is a nudge, 1.8 is a hammer
data-fracture-seed integer 20420731 Seed for the shard pattern. Fixed by default so the same plate breaks into the same pieces on every load; change it for a different arrangement, or vary it per element so two plates on one page do not share a pattern

The script also writes data-fracture-combo (0 to 3) on the element while a break is escalating, which is a hook for your own CSS.

Accessibility

  • Reduced motion: with prefers-reduced-motion: reduce no shards are built at all. The plate renders exactly as you authored it, whole and readable, with nothing hidden and nothing blank (the demo also hides its pattern switcher, which would otherwise be a control wired to nothing)
  • Without JavaScript: identical. Nothing is pre-hidden in CSS, so the plate is simply the plate
  • Keyboard: give the plate tabindex="0" and role="button"; Enter or Space strikes it at a fresh point on each press, and repeated presses build the same combo repeated clicks do
  • Focus visible: the contract CSS puts a ring on [data-fracture]:focus-visible
  • Screen readers: the original content stays in the DOM rather than being swapped out for shards, and the shard field, crack web and bloom are all aria-hidden, so the plate is never announced forty times over. Because the plate itself carries role="button", write its aria-label to cover both what it shows and what pressing it does, as the demo does
  • Touch: pointer events with touch-action: none, and pointercancel ends a fling safely

Performance Notes

  • Shards are sized to their own bounding box rather than the full plate, which is the difference between roughly 4MB and 100MB of compositor texture for a 44-piece break
  • Per frame each shard costs five GSAP quickSetters plus one opacity setter, and no clip-path or style-string writes at all; clip-paths are written once at build
  • The ticker is added on the first strike and removed the moment the last shard sleeps, so an idle plate costs nothing
  • Shard count scales down with plate area, so a phone gets a coarser break rather than the same count in postage stamps
  • Building the field is O(n squared) half-plane clipping. At the 12-96 shards this effect uses that is well under a frame; it is not the right algorithm for thousands of cells

Dependencies

Required:

  • GSAP 3.12+ (core only, no plugins)

Optional:

  • None. The effect has no scroll mechanic and does not use Lenis.

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.

Related articles

Five new GSAP effects you drive with the pointer

Five new GSAP effects: a holographic foil card, a Voronoi shatter, a cloth simulation, a curled page turn, and a curtain nav overlay. No ScrollTrigger.

Your cart

Your cart is empty

The Vault £99

The Vault library, plus future additions to the library.

Or browse effects, templates or UI elements.