ui-assemble
ui-assemble
UI ASSEMBLE — the reverse of ../ui-disassemble/: every scene opens on an EMPTY set (a bare pedestal, a phone with a black screen, a laptop showing only empty slot outlines, a blank browser). The UI is already blown apart so far that no piece is in frame: each one waits 700–2000 mm out — above the set, past the frame edges, or BEHIND the lens — tumbling. They stream in one by one, decelerate into an aligned exploded view, hold so the eye can read the structure, and then slowly pack home with a contact click. Every scene ends on the finished UI. ui3d: clear layers and cards, NOT the `assembly` shard preset. 1 unit = 1 mm. WebGPU. Preview: http://localhost:4444/runtime?project=promos/primitives/animations-transitions/ui-assemble/ui-assemble.promo
Read the rig's notes
UI SOURCE — the same Tailwind HTML as ui-disassemble: ../ui-disassemble/ui-disassemble.screens.html,
converted by scripts/html-screens.mts → ui-disassemble.screens.json. The templates below are
those converted screens; only their motion tracks are authored here.
THE RECIPE (every scene)
· OFF-FRAME START each piece sits at a start position checked against the opening camera
(projected outside the frame by more than its own half-size, or behind the lens), turned
40–210° on two or three axes. Nothing reads until the first piece crosses the frame edge.
· STREAM IN 0.30–0.35 s apart, BOTTOM-FIRST (the piece that ends lowest in the stack
arrives first, so later pieces always land above earlier ones). Each flies 3.0 s
easeOutCubic — it crosses the frame fast and spends the last second creeping into its slot
of the EXPLODED view (the same staging the disassemble scenes open to), its tumble
unwinding on the same curve.
· READ ~1 s hold on the exploded view; labels / chips pop as each piece docks.
· PACK HOME bottom-first, easeInOutCubic (or easeInCubic + a 1.5 mm rebound where the
piece should feel magnetic), while the camera swings to the hero framing. 1.5–2 s hold on
the finished UI.
SCENE MAP
s01 layer-stack six card sheets stream in from all sides into a labelled column, then press flat
s02 screen-sandwich five app layers fly onto a side-on iPhone, then settle as the phone turns to camera
s03 dashboard seven tiles come in from past the lens and the frame edges, hover, snap into their slots
s04 anatomy a player card's five pieces dock on the anatomy diagonal, then click home
s05 page-build five landing-page sections converge on a blank browser and press into place
AUDIO — music:3d-explode-bed (procedural, D dorian 120 BPM; the first 45 s) + the designed SFX
media:xp-*.wav: a swish as each piece is launched, a tick as it docks, a reversed whoosh-in
that stops dead on the first contact, a snap on every contact frame.
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 ASSEMBLE — the reverse of ../ui-disassemble/: every scene opens on an EMPTY set (a bare
pedestal, a phone with a black screen, a laptop showing only empty slot outlines, a blank
browser). The UI is already blown apart so far that no piece is in frame: each one waits
700–2000 mm out — above the set, past the frame edges, or BEHIND the lens — tumbling. They
stream in one by one, decelerate into an aligned exploded view, hold so the eye can read
the structure, and then slowly pack home with a contact click. Every scene ends on the
finished UI. ui3d: clear layers and cards, NOT the `assembly` shard preset. 1 unit = 1 mm.
WebGPU.
Preview: http://localhost:4444/runtime?project=promos/primitives/animations-transitions/ui-assemble/ui-assemble.promo
UI SOURCE — the same Tailwind HTML as ui-disassemble: ../ui-disassemble/ui-disassemble.screens.html,
converted by scripts/html-screens.mts → ui-disassemble.screens.json. The templates below are
those converted screens; only their motion tracks are authored here.
THE RECIPE (every scene)
· OFF-FRAME START each piece sits at a start position checked against the opening camera
(projected outside the frame by more than its own half-size, or behind the lens), turned
40–210° on two or three axes. Nothing reads until the first piece crosses the frame edge.
· STREAM IN 0.30–0.35 s apart, BOTTOM-FIRST (the piece that ends lowest in the stack
arrives first, so later pieces always land above earlier ones). Each flies 3.0 s
easeOutCubic — it crosses the frame fast and spends the last second creeping into its slot
of the EXPLODED view (the same staging the disassemble scenes open to), its tumble
unwinding on the same curve.
· READ ~1 s hold on the exploded view; labels / chips pop as each piece docks.
· PACK HOME bottom-first, easeInOutCubic (or easeInCubic + a 1.5 mm rebound where the
piece should feel magnetic), while the camera swings to the hero framing. 1.5–2 s hold on
the finished UI.
SCENE MAP
s01 layer-stack six card sheets stream in from all sides into a labelled column, then press flat
s02 screen-sandwich five app layers fly onto a side-on iPhone, then settle as the phone turns to camera
s03 dashboard seven tiles come in from past the lens and the frame edges, hover, snap into their slots
s04 anatomy a player card's five pieces dock on the anatomy diagonal, then click home
s05 page-build five landing-page sections converge on a blank browser and press into place
AUDIO — music:3d-explode-bed (procedural, D dorian 120 BPM; the first 45 s) + the designed SFX
media:xp-*.wav: a swish as each piece is launched, a tick as it docks, a reversed whoosh-in
that stops dead on the first contact, a snap on every contact frame.
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-assemble(width=1920 height=1080 fps=30)
audio
tracks
// music — music:3d-explode-bed: D dorian, 120 BPM, −16 LUFS. Cuts every 9 s (on a beat).
track#music(asset="music:3d-explode-bed" start=0 volume=0.55)
// designed SFX: swish = a piece in flight (peaks 0.3 s in); tick = A6 glass tap;
// whoosh-in = a reversed swell that stops dead on the landing (1.04 s long → starts 1.04 before);
// snap = magnetic click
// ── s01 layer-stack (0–9): launch 0.3…1.8 → dock 3.3…4.8 → press 5.8 → contacts 7.20…7.44
track#sfx_1(asset="media:xp-swish" start=0.3 volume=0.18)
track#sfx_2(asset="media:xp-swish" start=0.6 volume=0.18)
track#sfx_3(asset="media:xp-swish