in-scene-ui-assemble
in-scene-ui-assemble
IN-SCENE UI ASSEMBLE — one continuous scene. The UI does not start on the device: each part of the app lives in the WORLD, in the room it controls, next to the props it talks about. The camera tours them one by one while the VO explains each, then flies to the centre, where the phone assembles itself, and the four parts leave their rooms and dock on its screen. 1 unit = 1 mm. WebGPU. Preview: http://localhost:4444/runtime?project=promos/primitives/animations-transitions/in-scene-ui-assemble/in-scene-ui-assemble.promo Siblings: ../ui-assemble/ (off-frame pieces → exploded view → home, per scene) and ../ui-disassemble/ (the reverse).
Read the rig's notes
THE WORLD — an architectural model of a home (1600 × 1200 base, white low-cut walls),
shown as an exhibit on a two-tier black-stone pedestal in a colossal gallery: a polished
black floor, a nave of 4.3 m columns with lit slits, a ring portal eclipsed by a black disc
(see THE HALL below). Natural materials and champagne light — see PALETTE in materials.
The furniture and plants are GENERATED props (models.json → models/*.glb, FLUX.2 [dev] →
TRELLIS.2 on Runware): sofa, armchair, coffee table, books, fiddle-leaf fig, olive tree,
kettle, fruit bowl, two counter stools, entry bench. Walls, floors, lamps, door, panels and
the battery stay primitives (they carry the animated lights and states). Four rooms around an open hall:
living room front-left sofa, coffee table, rug, a floor lamp that dims → LIGHTS card
kitchen back-left counter, island, kettle, pendants, a wall
thermostat whose ring turns warm → CLIMATE card
entry front-right the front door in a full-height wall, smart
lock, doorbell camera, porch, plant → DOOR card
roof back-right a two-storey wing; on its roof deck six solar
panels, a battery wall, a model sun → ENERGY card
hall centre an empty lit plinth; the iPhone is out of sight until the end
THE TRICK — ONE NODE PER PART, the whole time. Every card is an item of the iPhone's own
screen overlay (ui3d overlay=screen), so its rest pose IS its slot on the home screen.
While the phone is exploded (and parked out of sight, see below) the cards are parked in
their rooms by a position offset
(overlay space = world axes, the phone is unrotated), a scale (×2.6 wide, ×3.2 half
cards) and a yaw toward that room's camera. Assembling is just those tracks running to 0.
overlay frame during the tour: the display layer rides the explode channel, 34 mm per
unit along +z → screen centre (0, 220, 5.8 + 136) at explode 4.
card offset = room point − screen centre − the card's slot centre (screen-centre mm,
y up), y flipped for overlay space (+ is down):
lights slot ( 0, 28) room (−420, 260, 200) → offset (−420, −12, 58)
climate slot (−16.25, −9) room (−380, 270, −480) → offset (−363.75, −59, −622)
door slot ( 16.25, −9) room ( 690, 300, 580) → offset ( 673.75, −89, 438)
energy slot ( 0, −45) room ( 380, 520, −120) → offset ( 380, −345, −262)
THE PHONE IS INVISIBLE until the hall beat: its position track parks it 2780 mm up (y 3000,
outside every frame of the tour) and drops it in 33.8–35.3 easeOutCubic. The overlay rides
the phone, so each card's position track adds the same 2780 mm (overlay +y, i.e. down) on
the same keys and curve — the two cancel exactly and the parked cards never move.
The phone assembles (explode 4 → 0, 35.4–37.9) while the camera holds on the hall: every
parked card slides 136 mm back with the display, out of frame. Then they fly (38.2 + 0.25k,
2.9 s easeInOutCubic, scale and yaw on the same curve) and click 2 mm proud → flush.
Each room point was chosen so the straight flight clears the walls (door card over the
220 mm door wall, energy card over the roof wing's front edge).
BEATS (VO clips measured: vo/timings.json; word times vo/words.json)
0.0– 4.4 establishing, high and wide vo-hub 0.6 "This is Hearth…"
4.4– 6.0 fly to the living room
6.0–12.2 LIGHTS: on "slide" (9.0) the knob slides 80 → 35 % and the lamp dims to 10.6
vo-lights 6.1
12.2–13.8 over the sofa to the kitchen
13.8–18.9 CLIMATE: 19.5 → 20.5 (16.2) → 21.5° (16.9), the dial and the wall
thermostat's ring turn warm vo-climate 13.9
18.9–20.5 across the hall to the porch
20.5–25.4 DOOR: the visitor appears on "who's there" (22.1); on "lock" (23.55) the card
and the lock's LED go Unlocked → Locked vo-door 20.6
25.4–27.2 up to the roof
27.2–33.0 ENERGY: on "panels make" the bars rise and 8.1 → 12.4 kWh (29.6–30.3); on
"battery" (31.7) 41 → 82 % and the battery wall's LEDs climb vo-energy 27.3
33.0–35.0 down to the hall; the phone drops in from above, exploded (33.8–35.3)
35.4–37.9 the phone assembles vo-gather 35.2 "Now, bring it all together."
37.9–42.0 camera pulls back; the four cards fly out of their rooms and dock
42.0–48.0 push in to the finished home screen; the house dims to night around it
vo-end 43.2 "Hearth. Your home, handled."
AUDIO — VO: vo/script.json rendered by `npm run promo:vo -- --project <this folder>`.
Music: music/hearth-bed.mp3, SFX: media/is-*.wav — both procedural (.claude/skills/
procedural-music, procedural-sfx), spotted to the beats above.
UI SOURCE — in-scene-ui-assemble.screens.html (Tailwind + Tabler only), converted by
`npx tsx scripts/html-screens.mts in-scene-ui-assemble.screens.html
in-scene-ui-assemble.sections.json in-scene-ui-assemble.screens.json` and dropped in below
as the t-hs-… templates; only their motion and state tracks are authored here.
LOOK — renderer tone_mapping=None + film_grain output_transform=2 (the sRGB encode), bloom,
dof_pass=three racked per beat (focus on the card + its prop, dof_blur 12–16; wide shots
5–7), SSAA ×2 last. The home screen's corners carry the iPhone glass radius (r 9.1). A
warm-black gallery (fog, amber slits, an eclipse portal) around a warm-white model under a
cool key with cyan / amber accents.- Scenes
- 1
- Kind
- reference rig
//
IN-SCENE UI ASSEMBLE — one continuous scene. The UI does not start on the device: each
part of the app lives in the WORLD, in the room it controls, next to the props it talks
about. The camera tours them one by one while the VO explains each, then flies to the
centre, where the phone assembles itself, and the four parts leave their rooms and dock
on its screen. 1 unit = 1 mm. WebGPU.
Preview: http://localhost:4444/runtime?project=promos/primitives/animations-transitions/in-scene-ui-assemble/in-scene-ui-assemble.promo
Siblings: ../ui-assemble/ (off-frame pieces → exploded view → home, per scene) and
../ui-disassemble/ (the reverse).
THE WORLD — an architectural model of a home (1600 × 1200 base, white low-cut walls),
shown as an exhibit on a two-tier black-stone pedestal in a colossal gallery: a polished
black floor, a nave of 4.3 m columns with lit slits, a ring portal eclipsed by a black disc
(see THE HALL below). Natural materials and champagne light — see PALETTE in materials.
The furniture and plants are GENERATED props (models.json → models/*.glb, FLUX.2 [dev] →
TRELLIS.2 on Runware): sofa, armchair, coffee table, books, fiddle-leaf fig, olive tree,
kettle, fruit bowl, two counter stools, entry bench. Walls, floors, lamps, door, panels and
the battery stay primitives (they carry the animated lights and states). Four rooms around an open hall:
living room front-left sofa, coffee table, rug, a floor lamp that dims → LIGHTS card
kitchen back-left counter, island, kettle, pendants, a wall
thermostat whose ring turns warm → CLIMATE card
entry front-right the front door in a full-height wall, smart
lock, doorbell camera, porch, plant → DOOR card
roof back-right a two-storey wing; on its roof deck six solar
panels, a battery wall, a model sun → ENERGY card
hall centre an empty lit plinth; the iPhone is out of sight until the end
THE TRICK — ONE NODE PER PART, the whole time. Every card is an item of the iPhone's own
screen overlay (ui3d overlay=screen), so its rest pose IS its slot on the home screen.
While the phone is exploded (and parked out of sight, see below) the cards are parked in
their rooms by a position offset
(overlay space = world axes, the phone is unrotated), a scale (×2.6 wide, ×3.2 half
cards) and a yaw toward that room's camera. Assembling is just those tracks running to 0.
overlay frame during the tour: the display layer rides the explode channel, 34 mm per
unit along +z → screen centre (0, 220, 5.8 + 136) at explode 4.
card offset = room point − screen centre − the card's slot centre (screen-centre mm,
y up), y flipped for overlay space (+ is down):
lights slot ( 0, 28) room (−420, 260, 200) → offset (−420, −12, 58)
climate slot (−16.25, −9) room (−380, 270, −480) → offset (−363.75, −59, −622)
door slot ( 16.25, −9) room ( 690, 300, 580) → offset ( 673.75, −89, 438)
energy slot ( 0, −45) room ( 380, 520, −120) → offset ( 380, −345, −262)
THE PHONE IS INVISIBLE until the hall beat: its position track parks it 2780 mm up (y 3000,
outside every frame of the tour) and drops it in 33.8–35.3 easeOutCubic. The overlay rides
the phone, so each card's position track adds the same 2780 mm (overlay +y, i.e. down) on
the same keys and curve — the two cancel exactly and the parked cards never move.
The phone assembles (explode 4 → 0, 35.4–37.9) while the camera holds on the hall: every
parked card slides 136 mm back with the display, out of frame. Then they fly (38.2 + 0.25k,
2.9 s easeInOutCubic, scale and yaw on the same curve) and click 2 mm proud → flush.
Each room point was chosen so the straigh