Page Shatter
Click any element and it shatters like glass from the impact point, then reassembles. Made for screen recordings.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
The real element is cloned into irregular glass shards with clip-path; they burst out with spin and gravity, and restore() plays it backwards. Works on any element: cards, headings, images, a whole section.
Installation
$ npm i @guetix/page-shatter
Publishing soonUntil it’s on npm, use the CLI or Manual tab. The API below stays the same.
vanilla.ts · any framework
import { shatter } from "@guetix/page-shatter";
card.addEventListener("click", (e) => {
const glass = shatter(card, { at: { x: e.clientX, y: e.clientY }, pieces: 16 });
setTimeout(() => glass.restore(), 2000);
});Usage
example.tsx
import { PageShatter } from "@/components/guetix/page-shatter";
<PageShatter pieces={16}>
<YourCard />
</PageShatter>404 pages'Delete' confirmationsInstagram / TikTok demos
Under the hood
The details that make it feel right, and that a one-line prompt usually misses:
- 01Radial slices around the impact point, split once more, give irregular shards that look like real glass.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| pieces | number | 14 | Radial slices. |
| force | number | 1 | Explosion strength. |
| at | { x; y } | — | Impact point (client coords). |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Keyboard: Enter/Space shatters from the center; reduced motion fades instead.