devices-explode
devices-explode
DEVICES-EXPLODE — every device's `explode` channel and the laptop's lid states, in one promo. Every GLB device (<iphone>, <laptop>/<macbook>, <ipad>, <imac>) is built in parts from code (scripts/device-models): each layer of the real hardware is its own node with real thickness and its own explode vector, so one keyframed number takes the device apart and puts it back. 1 unit = 1 mm. Preview: http://localhost:4444/runtime?project=promos/primitives/devices/devices-explode/devices-explode.promo
Read the rig's notes
THE CHANNEL — `explode` on the device tag: 0 assembled → 1 every part at its station,
> 1 further out along the same vectors. Outer parts leave first and seat last, so no
layer passes through its neighbour. The app UI rides on the display layer, and so does
the cover glass (bonded to the panel, as in the real devices): no loose glass sheet
ever hangs in front of the UI.
explode-spread scales every part's distance (default 1)
explode-stagger 0–0.9, how much of the channel the parts spend leaving one after
another (default 0.4; 0 = all together)
A constant `explode="0.3"` holds a partial teardown.
THE LAPTOP'S LID — its GLB carries clips the `state` channel plays (the same channel
and row grammar as any rigged GLB, see animations-transitions/animated-states):
open · closed held poses opening · closing one-shot moves, add `hold`
`state="closed"` is a one-row shorthand; with no state the lid rests open. The lid's
layers explode along its back normal — fanning out behind the lid when it is open,
rising in a stack above the base when it is closed — so a shut laptop comes apart too.
THE UI EXPLODE — the device stays whole and its app comes apart instead. The app is four
full-screen ui3d overlays (base · nav · cards · accents; lift 0.06 → 0.12 so they never
z-fight flush), each from its own transparent template, so stacked flush they compose the
app exactly. Their render_order is 1 / 200 / 400 / 600, not 1 / 2 / 3 / 4: every overlay
mesh draws at render_order + its paint index, so layers one apart interleave — the
laptop's cards layer painted its chart card (index ~16) over the accents layer's bars.
Each upper layer carries a `position` track in screen mm, +z off the glass: the accents
leave first and travel furthest, the nav last and least; coming back, the nav seats
first and the accents last — no layer ever overtakes the one above. The base stays on
the glass.
SCENE MAP — each device's explode, then its UI explode
s1 iphone-teardown upright, yawed −50°: the camera orbits off the screen as the stack
fans out front-to-back
s2 iphone-stack lying flat on a turntable: the layers rise and sink in a vertical stack
s3 iphone-ui the phone stays whole; the app lifts off the glass in four layers
s4 laptop starts closed and opens; the base comes apart vertically (keyboard
and top case up, internals and bottom case down) while the lid's
layers part along the screen normal; it seats again and closes
s5 laptop-ui open and whole; the dashboard lifts off the tilted screen
s6 ipad upright, yawed: the display lifts off the unibody, the internals
rise out of it, the camera module drops out of the back
s7 ipad-ui whole; the repair guide lifts off the glass
s8 imac the stand and back fall away behind, the display comes forward
and the chin drops, leaving the internals in view
s9 imac-ui whole; the repair-centre dashboard lifts off the screen
UI SOURCE — devices-explode.screens.html (Tailwind only), converted by
`npx tsx scripts/html-screens.mts devices-explode.screens.html devices-explode.sections.json
devices-explode.screens.json` and dropped in below as the t-…-app templates and the
t-…-l0 … l3 layer templates the UI explodes stack.- Topic
- devices
- Scenes
- 9
- Kind
- reference rig
//
DEVICES-EXPLODE — every device's `explode` channel and the laptop's lid states, in one
promo. Every GLB device (<iphone>, <laptop>/<macbook>, <ipad>, <imac>) is built in
parts from code (scripts/device-models): each layer of the real hardware is its own
node with real thickness and its own explode vector, so one keyframed number takes the
device apart and puts it back. 1 unit = 1 mm. Preview:
http://localhost:4444/runtime?project=promos/primitives/devices/devices-explode/devices-explode.promo
THE CHANNEL — `explode` on the device tag: 0 assembled → 1 every part at its station,
> 1 further out along the same vectors. Outer parts leave first and seat last, so no
layer passes through its neighbour. The app UI rides on the display layer, and so does
the cover glass (bonded to the panel, as in the real devices): no loose glass sheet
ever hangs in front of the UI.
explode-spread scales every part's distance (default 1)
explode-stagger 0–0.9, how much of the channel the parts spend leaving one after
another (default 0.4; 0 = all together)
A constant `explode="0.3"` holds a partial teardown.
THE LAPTOP'S LID — its GLB carries clips the `state` channel plays (the same channel
and row grammar as any rigged GLB, see animations-transitions/animated-states):
open · closed held poses opening · closing one-shot moves, add `hold`
`state="closed"` is a one-row shorthand; with no state the lid rests open. The lid's
layers explode along its back normal — fanning out behind the lid when it is open,
rising in a stack above the base when it is closed — so a shut laptop comes apart too.
THE UI EXPLODE — the device stays whole and its app comes apart instead. The app is four
full-screen ui3d overlays (base · nav · cards · accents; lift 0.06 → 0.12 so they never
z-fight flush), each from its own transparent template, so stacked flush they compose the
app exactly. Their render_order is 1 / 200 / 400 / 600, not 1 / 2 / 3 / 4: every overlay
mesh draws at render_order + its paint index, so layers one apart interleave — the
laptop's cards layer painted its chart card (index ~16) over the accents layer's bars.
Each upper layer carries a `position` track in screen mm, +z off the glass: the accents
leave first and travel furthest, the nav last and least; coming back, the nav seats
first and the accents last — no layer ever overtakes the one above. The base stays on
the glass.
SCENE MAP — each device's explode, then its UI explode
s1 iphone-teardown upright, yawed −50°: the camera orbits off the screen as the stack
fans out front-to-back
s2 iphone-stack lying flat on a turntable: the layers rise and sink in a vertical stack
s3 iphone-ui the phone stays whole; the app lifts off the glass in four layers
s4 laptop starts closed and opens; the base comes apart vertically (keyboard
and top case up, internals and bottom case down) while the lid's
layers part along the screen normal; it seats again and closes
s5 laptop-ui open and whole; the dashboard lifts off the tilted screen
s6 ipad upright, yawed: the display lifts off the unibody, the internals
rise out of it, the camera module drops out of the back
s7 ipad-ui whole; the repair guide lifts off the glass
s8 imac the stand and back fall away behind, the display comes forward
and the chin drops, leaving the internals in view
s9 imac-ui whole; the repair-centre dashboard lifts off the screen
UI SOURCE — devices-explode.screens.html (Tailwind only), converted by
`npx tsx scripts/html-screens.mts devices-explode.screens.html devices-explode.sections.json
devices-explode.scre