A device pulls itself apart layer by layer as you scroll, then clicks back together. Apple Mac Studio / Vision Pro page energy.
The signature "engineering reveal" animation: a product (phone, watch, headphones, laptop) appears assembled, then as you scroll its layers separate vertically in 3D space — glass on top, screen, motherboard, battery, frame — each labeled. The device rotates slightly as it explodes, then reassembles on scroll. Used by Apple on Mac Studio, Vision Pro, iPhone product pages; by Rolex, Tesla, every "we engineered this" page.
A pinned (position: sticky) stage holds an absolutely-positioned device, made of stacked layers each on its own Z-plane (translateZ). A scroll listener calculates a 0→1 progress through the parent's height and stores it in a CSS custom property --p. Each layer's transform interpolates from "assembled" (Z=0) to "exploded" (Z=±150px and translated up/down). The whole device also rotates X/Y based on progress for a "show me from a slight angle" feel. Callout labels fade in only when exploded.
Scroll inside. The device explodes outward as you go down, then comes back together at the bottom.
Build an Apple-style exploded-device scroll animation. Outer container has overflow-y:scroll and a tall inner div (1800px). Inside the tall div, place a sticky stage (position:sticky, top:0, height:100vh) that pins while you scroll past. Inside the stage, a 280×380 device container with perspective:1200px holds 5 absolutely-positioned layers (frame, battery, motherboard, OLED screen, cover glass). Each layer styled with transform-style:preserve-3d and a different look — frame: dark aluminium gradient; battery: amber tones with "BATT 4280mAh" text; motherboard: green circuit pattern using repeating-linear-gradient + colored squares for chips; screen: dark navy with a glowing accent blob; glass: frosted backdrop-filter:blur(10px). Scroll listener: calculate the stage's scroll progress 0→1 and set it as a CSS custom property --p on the device. Each layer's transform interpolates using --p — example: glass: translateY(-180px * (--p - 0.5)) translateZ(80 + 120*(1 - --p))px so it pulls forward AND up as --p approaches 0 or 1, snaps together at --p = 0.5. The whole device also rotateX(-20 + --p*40)deg rotateY(-15 + --p*30)deg so it tilts as it explodes. Absolutely-positioned callout labels (—Cover glass — OLED — SoC — Battery — Frame) appear around the exploded device with opacity:calc(1 - --p) so they fade out when re-assembled. Add a top progress bar tied to --p. Hero label at the bottom of the stage. The result feels like Apple's Vision Pro internals reveal.