Scroll effect

Exploded Product with Leader Labels

by Vanguardia · motionprompts.dev

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.

Type: Web motion
Framework: GSAP
Trigger: scroll

Save with a free account Customize for your product

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: gsap
Complexity: 1/5
Pinned: no
Reduced motion: handled
Libraries: gsap, ScrollTrigger, lenis

sticky stage over 320svh where six CSS ellipses in a 58deg rotateX separate along Z with a per-layer staggered slice of progress (offset i/n*0.55, span 0.45, cubic ease-out) written by gsap.set on every ScrollTrigger update; labels bound by data-for fade and slide in on their own offset, with vertical position and leader width recomputed from each layer live bounding box; no tween, no scrub, smoothing from Lenis

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev16,021 charsCustomize

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

The build prompt

More like this

A one-line prompt for an inference startup launch

UX Decision Explainer Animation

Motion Design Showreel Reaction Video

SaaS launch video for a product Opus picks

Product video for Distilbook

Squad.so SaaS Launch Video

Fresh recipes, every week.