Broken Shard Gallery
Images explode outward from center into a chaotic gallery layout as you scroll.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| images | string[] | [] | Array of image URLs for the exploding shards |
| text | string | "Disintegrate" | Hero text displayed before the shatter animation begins |
| backgroundColor | string | "bg-neutral-900" | Tailwind background color class for the scroll container |
When to Use
Perfect for high-energy product reveals, editorial intros, and landing pages where you want a dramatic entrance that rewards the user for scrolling.
Best Practices
Works best with 5–8 portrait images. Keep the hero text short (1–2 words) — it zooms and fades as you scroll so brevity reads better. Dark backgrounds let the image shards pop.
Why This Component Matters
A scroll-driven shard explosion turns a static gallery into an event. It immediately communicates craft and energy — the kind of motion that makes users stop and share a screenshot.
FAQ
QCan I customize the shard positions?
Yes — pass a `positions` prop as an array of `{x, y, r}` objects to define exactly where each card flies on scroll.
QHow many images works best?
5–8 images gives the densest shard field. Fewer (3–4) creates a more spacious, intentional layout.
QIs the explosion speed adjustable?
The motion maps to scroll progress, so the speed is entirely user-controlled. Adjust `containerHeight` (default h-[300vh]) to make the sequence longer or snappier.
Related Components
Velocity Smear
Gallery that skews and stretches in real-time based on scroll velocity — the faster you scroll, the more the images smear.
Curtain Split
Two image panels split apart like stage curtains on scroll, revealing editorial text content hidden beneath.
Image Ribbons
Three horizontal image strips drifting in alternating directions as you scroll — rows counter-move to create depth and motion.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.