Components / Animations / Shatter Reveal

Shatter Reveal

An image over content that breaks when struck. The shards are a Voronoi diagram seeded densely around the impact and Lloyd-relaxed out of slivers, and each is a rigid body: its mass is its area and its moment of inertia is its own polygon’s. The strike lands at each shard’s nearest corner, so r × J spins the small pieces near the impact and barely turns the far ones, and quadratic drag lets the small ones flutter down last. Press and hold to crack it, let go to strike, slide off to change your mind; Space does the same from the centre and Enter strikes outright. Setting shattered back to false springs every shard home from wherever it is.

Usage

import ShatterReveal from '@/components/shatter-reveal'

<ShatterReveal src={photo} alt="Cover" shattered={open} onShatter={() => setOpen(true)}>
  {content}
</ShatterReveal>

Installation

npx shadcn@latest add https://morphiq.prathampatel.design/r/shatter-reveal.json

Model

ω = (r × J) / I,   m·a = mg − c·|v|·v·√A

I the shard’s own polygon inertia · m its area · J the strike

Props

Property	Type	Default	Description
`src`	`string`	—	The image that breaks.
`alt`	`string`	`''`	Describes the image; the strike button is named from it.
`shattered`	`boolean`	—	Controlled state. Leave undefined to shatter on click or Enter. Setting it back to false mends the image.
`defaultShattered`	`boolean`	`false`	Uncontrolled: start already broken, with the content showing. Default false.
`onShatter`	`(point: { x: number; y: number }) => void`	—	Called with the impact point, in px from the top-left, when the image is struck.
`onSettle`	`() => void`	—	Called once the last shard has fallen out of view.
`onRestore`	`() => void`	—	Called once the image is whole again after `shattered` goes back to false. Not called if it is struck again first.
`shards`	`number`	`56`	Number of shards. Default 56.
`relax`	`number`	`2`	Lloyd relaxation passes. 0 leaves raw Voronoi cells, slivers included. Default 2.
`impulse`	`number`	`560`	Strike speed at the point of impact, px/s. Default 560.
`gravity`	`number`	`2400`	px/s². Default 2400.
`drag`	`number`	`0.0011`	Quadratic drag coefficient. Higher makes small shards flutter. Default 0.0011.
`crack`	`number`	`5200`	Speed of the crack front, px/s. A shard lets go a beat after the front passes it. 0 breaks everything at once. Default 5200.
`mend`	`number`	`0.5`	Seconds for the struck shard to come home when the image is restored; the far ones seat sooner. 0 restores instantly. Default 0.5.
`sheen`	`number`	`0.08`	Strength of the light under a hovering pointer, 0–1. 0 turns it off. Default 0.08.
`seed`	`number`	`7`	Seed for the fracture pattern. The same seed breaks the same way. Default 7.
`fit`	`'cover' \| 'contain'`	`'cover'`	How the image fills the box. Default 'cover'.
`children`	`ReactNode`	—	What the image covers.