uis
uis
UI primitives — every way a ui()/ui3d() surface gets BUILT, one scene each. The subject is the entrance choreography itself: each scene assembles one UI from a different family of moves, so this file doubles as the animation vocabulary for smart UIs.
Read the rig's notes
PIXEL-SPACE SECTION (scenes 01–10) — one full-stage <ui3d> per scene, world
mapped 1:1 to the 1920x1080 stage (camera at 960 540 1320). Child tracks are
DELTAS from the layout pose: position "dx dy dz" (SVG y-down, +z toward
camera), scalar scale/opacity, rotation.x/rotation.y in degrees.
01. edges — regions slide in from the four screen edges, staggered
02. depth — cards arrive on the Z axis: from deep behind AND from
in front of the camera, plus a yaw-unfolding stat row
03. spring — a tile wall pops scale 0.2→1 on an easeOutBack diagonal
wave; every icon pops again a beat after its tile
04. hinges — rotation builds: top banner pitches down, two door
panels yaw open, the dock swings up from below
05. swarm — the centerpiece: 12 chips converge from 12 different
scattered origins (offset + spin each) into one mosaic
06. widgets — content tracks draw the data: chart-draw, ring-fill,
bar-fill, typewriter, check-draw
07. feed — flow choreography: chat bubbles cascade up, toasts
slide in from the right, a reply types itself and lands
08. dialog — state choreography: base UI builds, scrim dims, modal
springs in, cursor clicks, checkmark confirms, all undone
09. behaviors — the living idle: float vs orbit-spin vs pulse, side by
side on three labelled cards while the cursor tours them
10. exploded — a finished dashboard separates into Z layers while the
camera arcs to 3/4, then snaps back together
WORLD-SPACE SECTION (scenes 11–12) — world units, camera at z≈9, lit like a
product shot. Scene 10 owns the boundary cut and sets transition=none, since
match-move cannot carry a haze rig across a coordinate-system change.
11. panels — three floating <ui3d> panels (world_width mapping) at
different yaws, each building its own content
12. glass — iphone + laptop in a flow row; the SAME child-track
grammar builds each screen inside <ui>
Matched haze rides every scene (haze-a/haze-b + dot-a/b/c in px scenes,
wz0..wz2 in world scenes) so transition=match-move carries the backdrop.
Preview: /packages/runtime/index.html?project=promos/primitives/uis/uis.promo- Topic
- uis
- Scenes
- 12
- Kind
- reference rig
//
UI primitives — every way a ui()/ui3d() surface gets BUILT, one scene each.
The subject is the entrance choreography itself: each scene assembles one
UI from a different family of moves, so this file doubles as the animation
vocabulary for smart UIs.
PIXEL-SPACE SECTION (scenes 01–10) — one full-stage <ui3d> per scene, world
mapped 1:1 to the 1920x1080 stage (camera at 960 540 1320). Child tracks are
DELTAS from the layout pose: position "dx dy dz" (SVG y-down, +z toward
camera), scalar scale/opacity, rotation.x/rotation.y in degrees.
01. edges — regions slide in from the four screen edges, staggered
02. depth — cards arrive on the Z axis: from deep behind AND from
in front of the camera, plus a yaw-unfolding stat row
03. spring — a tile wall pops scale 0.2→1 on an easeOutBack diagonal
wave; every icon pops again a beat after its tile
04. hinges — rotation builds: top banner pitches down, two door
panels yaw open, the dock swings up from below
05. swarm — the centerpiece: 12 chips converge from 12 different
scattered origins (offset + spin each) into one mosaic
06. widgets — content tracks draw the data: chart-draw, ring-fill,
bar-fill, typewriter, check-draw
07. feed — flow choreography: chat bubbles cascade up, toasts
slide in from the right, a reply types itself and lands
08. dialog — state choreography: base UI builds, scrim dims, modal
springs in, cursor clicks, checkmark confirms, all undone
09. behaviors — the living idle: float vs orbit-spin vs pulse, side by
side on three labelled cards while the cursor tours them
10. exploded — a finished dashboard separates into Z layers while the
camera arcs to 3/4, then snaps back together
WORLD-SPACE SECTION (scenes 11–12) — world units, camera at z≈9, lit like a
product shot. Scene 10 owns the boundary cut and sets transition=none, since
match-move cannot carry a haze rig across a coordinate-system change.
11. panels — three floating <ui3d> panels (world_width mapping) at
different yaws, each building its own content
12. glass — iphone + laptop in a flow row; the SAME child-track
grammar builds each screen inside <ui>
Matched haze rides every scene (haze-a/haze-b + dot-a/b/c in px scenes,
wz0..wz2 in world scenes) so transition=match-move carries the backdrop.
Preview: /packages/runtime/index.html?project=promos/primitives/uis/uis.promo
promo#uis
// =======================================================================
// SCENE 01 · EDGES — one shell, four entrance directions
// =======================================================================
scene#s01-edges(duration=6 transition=match-move transition-duration=0.8)
camera(type=perspective fov=48 near=0.1 far=8000 position="960 540 1320" look_at="960 540 0")
position
0 960 540 1360
3 easeInOutCubic 950 555 1290
6 easeInOutCubic 960 540 1320
look_at
0 960 540 0
3 easeInOutCubic 950 555 0
6 easeInOutCubic 960 540 0
layers
layer#world(space=world z-index=0)
background(top=#081120 bottom=#04060c)
postprocessing
step(name=render)
step(name=unreal_bloom strength=0.18 radius=0.4 threshold=0.85)
haze#s01-haze-a(match=haze-a position="1320 760 -650" opacity=0.17 color=#0f6fd6 size="3100 2360" pulse=0 decay=0)
position
0 1320 760 -650
6 easeInOutCubic 1240 800 -650
opacity
0 0.17
3 easeInOutCubic 0.21
6 easeInOutCubic 0.17
haze#s01-haze-b(match=haze-b position="420 300 -680" opacity=0.11 color=#5e2a9d size="2500 1960"