Exploded Product with Leader Labels
What it does
A pinned stage where a six-layer product separates along Z as you scroll and each part names itself with a hairline leader. The label is bound to its layer by `data-for` → `data-i`, and BOTH its vertical position and the leader's width are computed from the layer's live bounding box every frame — hand-placed labels survive exactly until somebody adds a part or swaps two, and a wrong label is worse than none because it still looks authoritative. The separation is staggered per layer (each gets its own slice of the progress) rather than uniform: moving all six at the same rate keeps them evenly spaced the whole way, so the object never reads as coming apart, only as getting taller. The leader stops at the edge of the stack rather than chasing its own layer, so its length does not jitter with the separation. Layers are CSS ellipses in a shallow 58° rotation — a photograph of a product cannot come apart. Dressed as a refillable compact: Antonio + Bitter, ink, blush and brass.
How it's built
| Category | scroll |
|---|---|
| Tech | gsap, lenis |
| GSAP plugins | ScrollTrigger |
| Complexity | section |
| Performance cost | light |
| Mobile-safe | yes |
| Scroll | hijacks scrolling |
Rebuild it with AI
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# Exploded Product with Leader Labels — the object comes apart and names its own pieces
## Goal
Build a pinned stage where a layered product **separates along Z as you scroll**, and each part
names itself with a hairline leader running back to the stack.
Use it when the argument is *what the thing is made of*. A named exploded view beats a bullet list
of features because the reader can see the relationship between the parts, not just their names.
## Tech
Vanilla HTML/CSS/JS with ES modules: `gsap` + `ScrollTrigger`, and `lenis`.
Wire Lenis to ScrollTrigger — this is not optional:
```js
const lenis = new Lenis();
lenis.on("scroll", ScrollTrigger.update);
…Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in
New components in your inbox
One email a week, only when new components ship, each with its live demo and prompt.