# Fracture Reveal

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

Canonical: https://gsapvault.com/effects/fracture-reveal
Live demo: https://gsapvault.com/demos/fracture-reveal/index.html

| Property | Value |
|----------|-------|
| Type | effect |
| Tier | paid |
| Price | £5 |
| Difficulty | advanced |
| Plugins | Core GSAP only |
| Techniques | clip-path, voronoi, pointer-effects, momentum, micro-interaction, 3d-transforms |
| Uses Lenis | No |

## Overview

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.

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.

## Features

- 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

## 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

## Vibe-Code Ready Setup

This effect includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.

[How AI-assisted setup works](https://gsapvault.com/vibe-coding)

## 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.

## Integration Preview

How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download.

### Quick Start

**1. Add to your HTML `<head>`:**

```html
<link rel="stylesheet" href="path/to/style.css">
```

**2. Add before closing `</body>` tag:**

```html
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<script src="path/to/script.js"></script>
```

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

```html
<div class="hero-plate" data-fracture role="button" tabindex="0"
     aria-label="Break the hero image. Press Enter or Space to strike it.">
  <img src="hero.jpg" alt="Studio interior">
</div>
```

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.

### 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

### Dependencies

**Required:**

- GSAP 3.12+ (core only, no plugins)

**Optional:**

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

## What You Get

- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library

## Get the Code

This is a premium effect. The standard license costs £5 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries.

- [Buy Fracture Reveal](https://gsapvault.com/effects/fracture-reveal)
- [Effects & Templates Vault (£39 one-time, best value): every current and future effect and template](https://gsapvault.com/effects)

## Judge the Code Quality First

These related effects are free with complete source published, written to the same production standard (cleanup functions, reduced-motion support, framework-agnostic):

- [Image Clip Reveal](https://gsapvault.com/effects/image-clip-reveal.md): A cinematic image reveal where a directional polygon aperture opens as the photograph settles from a restrained Ken Burns scale and its editorial caption lands.

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt