The same product element travels and morphs between three scenes — circle → screen → portrait card — instead of fading in fresh each time. The "shared element" trick on the web.
Most scroll narratives fade one scene out and the next in, with each scene's visual freshly mounted. Hand-off keeps a single product element mounted across all scenes — it just morphs its size, position, shape, and color as you scroll between scenes. Effect: the eye tracks the same physical object as it transforms through different contexts. The "shared element transition" pattern, popularized by native iOS/Android, now common on Apple product pages and ambitious storytelling sites.
Each scene is an absolutely-positioned full-bleed stage with its own background and copy. ONE product element lives outside any scene — it's a sibling of all stages — and has CSS classes .pos-1, .pos-2, .pos-3 each defining different top/left/width/height/border-radius/transform/background values. A transition on ALL of those properties (~0.7s with a smooth cubic-bezier) makes the element morph between positions. IntersectionObserver swaps the active class as each scene scrolls into view, and toggles the matching scene's .on for the background.
Scroll inside. The same product shape morphs between 3 scenes — circle, dashboard card, portrait card — while the scene backgrounds + copy change.
A single round orb. The starting form before it becomes a product.
The same matter, now a dashboard. The shape flattens and stretches.
A card you can hold. Numbered, signed, ready to ship.
Build a shared-element scroll narrative. Inside an overflow-y:scroll container, place a sticky pin (top:0 height:100vh). Inside the pin: 3 absolutely-positioned full-bleed stage divs (each with its own gradient bg + copy + ix label + display headline). Default all stages opacity:0 — only the active stage has .on which opacity:1. Below the pin in the DOM, place 3 invisible spacer divs (height:100vh each) with data-anchor="1|2|3" — these are the scroll triggers. The KEY element: a SINGLE .ho-product div, also absolutely positioned inside the pin (as a SIBLING of the stage divs), with classes .pos-1 / .pos-2 / .pos-3 — each defines a different top/left/width/height/border-radius/transform/background/box-shadow. Apply transition:top 0.7s cubic-bezier(0.7,0,0.2,1), left 0.7s, width 0.7s, height 0.7s, border-radius 0.7s, transform 0.7s, background 0.7s, box-shadow 0.7s on the product so it morphs between positions instead of teleporting. IntersectionObserver on the anchor divs swaps both the active stage's .on AND the product's .pos-N class. Result: as the user scrolls, scenes crossfade but the product element visibly travels and morphs between them — circle in scene 1, wide rounded screen in scene 2, tall portrait card in scene 3. Add a 3-segment progress bar at the top showing which scene is active.