ui3d

ui3d primitives — the UI as REAL geometry. The companion to uis.promo: that file is about how a ui surface gets BUILT; this one is about where a ui3d surface LIVES. Two idioms, one grammar:

Read the rig's notes

· FREE-STANDING <ui3d> — its own node, its own place in the world, mapped
by world_width. It flies: camera moves through flocks of panels, panels
sweep past on arcs, a corridor of cards recedes into depth.

· <ui3d overlay="screen"> INSIDE A DEVICE — the important one. Nested in
<iphone> / <ipad> / <laptop> / <imac> / <chrome>, every child mounts as a
real plane anchored FLUSH on the glass, in the screen's own mm space
(1 stage unit ≡ 1mm on the display: iphone 71×154, ipad 197×262, laptop
346×223, imac 520×293, chrome 480×300). The flat <ui> behind it is the
app the parts jump OUT of, and back into. Child tracks are DELTAS from
the layout pose — position "dx dy dz" (y down like the screen, +z toward
the camera, in mm), rotation.x / rotation.y in degrees, scale, opacity —
so "0 0 0" is flush on the glass and dz=60 hovers 6cm above it.

Overlay rules (see camera-framing-devices.promo for the full note):
· ALWAYS state width/height = the device's screen mm. Left off, the stage
silently defaults to 1920×1080 and everything renders at ~quarter scale.
· stack overlapping overlays with lift (0.5, 0.6, …) + render_order.
· items are absolute (x y w h) in screen mm — the overlay stage spans the
whole display, so you pick the region with the card's own box.
· an overlay item IS a node: it can be framed (bounds=union side=front).

Scene map:
01. flock free · nine panels scattered in depth, floating; the camera glides through
02. sweep free · five panels arc past the lens on a carousel path, yawing to face it
03. corridor free · a z-corridor of cards; the camera dollies down it
04. peel iphone · notification cards peel off the glass, hover, snap back
05. fan ipad · five photo cards fan out of the tablet into a 3D arc
06. lift laptop · dashboard tiles rise to staggered depths; the chart swings out on rotation.x
07. widgets imac · widgets pop (easeOutBack) out of the desktop and drift on their own loops
08. modal chrome · a dialog jumps toward the camera; the page dims under a real scrim plane
09. family iphone + laptop + ipad · one system, three glasses, one card lifts out of each in turn
10. escape iphone · the UI splits into z-layers and one card flies THROUGH the lens

RICH APPS ON DEVICES (11–20) — a full, dense app screen in <ui> on every
device, plus <ui3d overlay> parts that leave the glass.
11. bank iphone · wallet: balance, quick actions, transactions · the card tilts off, a toast lands
12. music iphone · now playing · the art pops toward the lens, the queue fans out
13. fitness iphone · rings, stats grid, week bars · the rings lift and turn, the goal badge pops
14. kanban ipad · three columns · one card lifts, crosses two columns on dx, drops in Done
15. editor ipad · design tool: toolbar, canvas, inspector · layers panel + colour picker float off
16. analytics laptop · sidebar, KPI row, chart, channels, table · KPIs lift in a stagger, rows follow
17. inbox laptop · folders, list, reading pane · the open mail lifts and grows, replies fan out
18. system imac · a component library · six components pop to six depths and drift
19. pricing chrome · nav, hero, three plans · Pro lifts, its badge pops, the CTA pulses
20. checkout chrome · payment form + summary · pay: scrim, then a receipt flies in from the lens

Matched haze (hz0..hz2) rides every scene so transition=match-move carries the
backdrop; everything is world units, so no coordinate-system cut is needed.
Capture: nx run tools:capture:webgl -- --project promos/primitives/uis/ui3d.promo
Preview: /packages/runtime/index.html?project=promos/primitives/uis/ui3d.promo

Topic: uis
Scenes: 20
Kind: reference rig

//
    ui3d primitives — the UI as REAL geometry. The companion to uis.promo: that
    file is about how a ui surface gets BUILT; this one is about where a ui3d
    surface LIVES. Two idioms, one grammar:

      · FREE-STANDING <ui3d> — its own node, its own place in the world, mapped
        by world_width. It flies: camera moves through flocks of panels, panels
        sweep past on arcs, a corridor of cards recedes into depth.

      · <ui3d overlay="screen"> INSIDE A DEVICE — the important one. Nested in
        <iphone> / <ipad> / <laptop> / <imac> / <chrome>, every child mounts as a
        real plane anchored FLUSH on the glass, in the screen's own mm space
        (1 stage unit ≡ 1mm on the display: iphone 71×154, ipad 197×262, laptop
        346×223, imac 520×293, chrome 480×300). The flat <ui> behind it is the
        app the parts jump OUT of, and back into. Child tracks are DELTAS from
        the layout pose — position "dx dy dz" (y down like the screen, +z toward
        the camera, in mm), rotation.x / rotation.y in degrees, scale, opacity —
        so "0 0 0" is flush on the glass and dz=60 hovers 6cm above it.

    Overlay rules (see camera-framing-devices.promo for the full note):
      · ALWAYS state width/height = the device's screen mm. Left off, the stage
        silently defaults to 1920×1080 and everything renders at ~quarter scale.
      · stack overlapping overlays with lift (0.5, 0.6, …) + render_order.
      · items are absolute (x y w h) in screen mm — the overlay stage spans the
        whole display, so you pick the region with the card's own box.
      · an overlay item IS a node: it can be framed (bounds=union side=front).

    Scene map:
      01. flock      free  · nine panels scattered in depth, floating; the camera glides through
      02. sweep      free  · five panels arc past the lens on a carousel path, yawing to face it
      03. corridor   free  · a z-corridor of cards; the camera dollies down it
      04. peel       iphone · notification cards peel off the glass, hover, snap back
      05. fan        ipad   · five photo cards fan out of the tablet into a 3D arc
      06. lift       laptop · dashboard tiles rise to staggered depths; the chart swings out on rotation.x
      07. widgets    imac   · widgets pop (easeOutBack) out of the desktop and drift on their own loops
      08. modal      chrome · a dialog jumps toward the camera; the page dims under a real scrim plane
      09. family     iphone + laptop + ipad · one system, three glasses, one card lifts out of each in turn
      10. escape     iphone · the UI splits into z-layers and one card flies THROUGH the lens

    RICH APPS ON DEVICES (11–20) — a full, dense app screen in <ui> on every
    device, plus <ui3d overlay> parts that leave the glass.
      11. bank       iphone · wallet: balance, quick actions, transactions · the card tilts off, a toast lands
      12. music      iphone · now playing · the art pops toward the lens, the queue fans out
      13. fitness    iphone · rings, stats grid, week bars · the rings lift and turn, the goal badge pops
      14. kanban     ipad · three columns · one card lifts, crosses two columns on dx, drops in Done
      15. editor     ipad · design tool: toolbar, canvas, inspector · layers panel + colour picker float off
      16. analytics  laptop · sidebar, KPI row, chart, channels, table · KPIs lift in a stagger, rows follow
      17. inbox      laptop · folders, list, reading pane · the open mail lifts and grows, replies fan out
      18. system     imac · a component library · six components pop to six depths and drift
      19. pricing    chrome · nav, hero, three plans · Pro lifts, its badge pops, the CTA pulses
      20. checkout   chrome · payment form + summary · pay: scrim, then a receipt flies in from the lens

    Matched haze (hz0..hz2) rides every scene so transition=match-move carries the
    backdrop; everything is world units, so no coordinate-system cut is needed.
    Captu