ui-disassemble
ui-disassemble
UI DISASSEMBLE — five ways to take an app UI apart in depth and put it back together (ui3d: clear layers and cards, NOT the `assembly` shard preset), in the look of a hardware launch film. Each scene opens on the finished UI, explodes it and packs it home. Every layer, tile and section is its own node driven by hand-written position / rotation / scale keyframes, staggered so the eye can follow each piece out and back. 1 unit = 1 mm. WebGPU. The reverse (starts blown out past the frame, assembles slowly) is ../ui-assemble/; the product teardowns (massage gun, speaker, watch) live in ../3d-explode/3d-explode.promo. Preview: http://localhost:4444/runtime?project=promos/primitives/animations-transitions/ui-disassemble/ui-disassemble.promo
Read the rig's notes
UI SOURCE — every layer, tile, label and app screen is Tailwind HTML in
ui-disassemble.screens.html, converted by `npx tsx scripts/html-screens.mts
ui-disassemble.screens.html ui-disassemble.sections.json
ui-disassemble.screens.json` and dropped in below as templates (t-…). A disassemble
layer is a TRANSPARENT section carrying only its own content + a cyan hairline, so the layers
stacked flush compose the whole UI, and pulled apart each one reads on its own.
THE RECIPES
· stack along a normal s01 s02 — every layer is a node at its own rest offset; one track
per layer adds k × gap along the normal. DISASSEMBLE top-first, REASSEMBLE bottom-first:
with that stagger no layer ever overtakes its neighbour, so nothing z-fights on landing.
· rails that stretch s01 — a unit cylinder (height 1, base at y=0 inside a g) whose g
scale.y track rides the top layer's offset.
· radial burst + snap s03 — each tile flies along its own vector out of the screen centre
(overlay deltas: x y in screen mm, +z off the glass), drifts, then lands with a small
overshoot key 0.18 s before rest — the "magnetic" settle.
· diagonal anatomy s04 — registered full-card pieces (same stage, same origin) step
out k × (dx, dy, dz) so the camera's three-quarter view separates them.
· cross-device recompose s05 — chrome sections fly to the iPad on arcs, scaled to the
tablet width, and hand over to the iPad's own sections in a 0.25 s crossfade.
SCENE MAP
s01 layer-stack a payment card → six labelled sheets (shadow · base · glass · chip · type · sheen)
s02 screen-sandwich iPhone app → five layers lift off the glass; the phone turns side-on
s03 dashboard-burst laptop dashboard tiles burst toward the lens and snap back into their slots
s04 anatomy a music-player card steps apart on a diagonal; spec chips annotate it
s05 recompose a landing page leaves the browser and rebuilds itself on an iPad
AUDIO — music:3d-explode-bed (procedural, D dorian 120 BPM, shared with 3d-explode; this cut
plays its first 41 s, every cut on a beat) + designed SFX media:xp-*.wav (procedural):
whoosh-out on every disassemble, whoosh-in ending on every landing, snaps/ticks on contact
frames. Built-in UI sfx for the app taps.
LOOK — every scene: renderer tone_mapping=None + film_grain output_transform=2 (the sRGB
encode), bloom, SSAA ×2 last. Navy-to-black backdrop, cyan #35e0ff / teal #2ee6c8 accents.
Each scene stands on a studio set: a glossy floor with a faint grid, a lit plinth or
pedestal, and standing light bars behind.- Scenes
- 5
- Kind
- reference rig
//
UI DISASSEMBLE — five ways to take an app UI apart in depth and put it back together
(ui3d: clear layers and cards, NOT the `assembly` shard preset), in the look of a hardware
launch film. Each scene opens on the finished UI, explodes it and packs it home. Every
layer, tile and section is its own node driven by hand-written position / rotation / scale
keyframes, staggered so the eye can follow each piece out and back. 1 unit = 1 mm. WebGPU.
The reverse (starts blown out past the frame, assembles slowly) is ../ui-assemble/; the
product teardowns (massage gun, speaker, watch) live in ../3d-explode/3d-explode.promo.
Preview: http://localhost:4444/runtime?project=promos/primitives/animations-transitions/ui-disassemble/ui-disassemble.promo
UI SOURCE — every layer, tile, label and app screen is Tailwind HTML in
ui-disassemble.screens.html, converted by `npx tsx scripts/html-screens.mts
ui-disassemble.screens.html ui-disassemble.sections.json
ui-disassemble.screens.json` and dropped in below as templates (t-…). A disassemble
layer is a TRANSPARENT section carrying only its own content + a cyan hairline, so the layers
stacked flush compose the whole UI, and pulled apart each one reads on its own.
THE RECIPES
· stack along a normal s01 s02 — every layer is a node at its own rest offset; one track
per layer adds k × gap along the normal. DISASSEMBLE top-first, REASSEMBLE bottom-first:
with that stagger no layer ever overtakes its neighbour, so nothing z-fights on landing.
· rails that stretch s01 — a unit cylinder (height 1, base at y=0 inside a g) whose g
scale.y track rides the top layer's offset.
· radial burst + snap s03 — each tile flies along its own vector out of the screen centre
(overlay deltas: x y in screen mm, +z off the glass), drifts, then lands with a small
overshoot key 0.18 s before rest — the "magnetic" settle.
· diagonal anatomy s04 — registered full-card pieces (same stage, same origin) step
out k × (dx, dy, dz) so the camera's three-quarter view separates them.
· cross-device recompose s05 — chrome sections fly to the iPad on arcs, scaled to the
tablet width, and hand over to the iPad's own sections in a 0.25 s crossfade.
SCENE MAP
s01 layer-stack a payment card → six labelled sheets (shadow · base · glass · chip · type · sheen)
s02 screen-sandwich iPhone app → five layers lift off the glass; the phone turns side-on
s03 dashboard-burst laptop dashboard tiles burst toward the lens and snap back into their slots
s04 anatomy a music-player card steps apart on a diagonal; spec chips annotate it
s05 recompose a landing page leaves the browser and rebuilds itself on an iPad
AUDIO — music:3d-explode-bed (procedural, D dorian 120 BPM, shared with 3d-explode; this cut
plays its first 41 s, every cut on a beat) + designed SFX media:xp-*.wav (procedural):
whoosh-out on every disassemble, whoosh-in ending on every landing, snaps/ticks on contact
frames. Built-in UI sfx for the app taps.
LOOK — every scene: renderer tone_mapping=None + film_grain output_transform=2 (the sRGB
encode), bloom, SSAA ×2 last. Navy-to-black backdrop, cyan #35e0ff / teal #2ee6c8 accents.
Each scene stands on a studio set: a glossy floor with a faint grid, a lit plinth or
pedestal, and standing light bars behind.
promo#ui-disassemble(width=1920 height=1080 fps=30)
audio
tracks
// music — music:3d-explode-bed: D dorian, 120 BPM (every cut lands on a beat), −16 LUFS.
// Scored for the full 83 s 3d-explode cut; this promo plays its first 41 s (pulse from 16 s,
// full groove from 32 s) and ends on the beat where the bed continues into 3d-explode.
track#music(asset="music:3d-explode-bed" start=0 volume=0.55)
// designed SFX (media/xp-*.wav, procedural): whoosh-o