ui-devices

UI on devices — ten product shots, every screen a REAL ui stage.

Read the rig's notes

The companion to ui.promo: the same component vocabulary, but always inside
a device (`iphone` / `ipad` / `laptop` / `imac` / `chrome`), authored in the
glass's own millimetres — an iphone stage is 71x154, ipad 197x262, laptop
346x223, imac 520x293, chrome 480x300, and a `text(size=5)` on a phone is a
5mm glyph. No coords_width step: a ui stage IS mm, so the numbers you type
are the numbers on the glass.

Every scene is a product shot: a mirror floor (reflector-ground), a
shadow-casting key + rim, a studio HDR, onyx or tinted haze banks, film
grain, and a `frame` camera program that closes in on the LIVE DISPLAY
(`node=<device>` frames the screen, not the casing).

01. bank iphone · space-black · onyx studio · wallet, gradient card
02. rings iphone · porcelain · bronze studio · stat-rings on ring-fill
03. music iphone · graphite · cool studio · now playing, waveform bars
04. tablet ipad · warm · editorial travel cover, image + text-block
05. analytics laptop · space-black · onyx · dark dashboard, charts + table
06. ide laptop · cool · editor with tree, tabs, syntax runs, terminal
07. imac imac · daylight interior · design tool, panels, artboards
08. browser chrome window · SaaS landing page, glass hero, pricing
09. handoff iphone -> laptop · checkout on the phone lands on the desk
10. family imac + laptop + ipad + iphone · one system, four glasses

AUTHORING NOTE — only the tags in the emitter's CONTENT_TAGS list group into
a parent's <children>; everything else (paragraph, headline, rich-text-block,
input-*, action-set, window-frame, cursor) is emitted loose and is appended
AFTER its plain siblings at parse time, silently reordering the flex. Each
one below therefore sits in its own
`card(w=hug h=hug fill=transparent shadow=false)`.

Capture: `nx run tools:capture:webgl -- --project promos/primitives/uis/ui/ui-devices.promo`
Preview: /packages/runtime/index.html?project=promos/primitives/uis/ui/ui-devices.promo

Topic: uis
Scenes: 10
Kind: reference rig

//
    UI on devices — ten product shots, every screen a REAL ui stage.

    The companion to ui.promo: the same component vocabulary, but always inside
    a device (`iphone` / `ipad` / `laptop` / `imac` / `chrome`), authored in the
    glass's own millimetres — an iphone stage is 71x154, ipad 197x262, laptop
    346x223, imac 520x293, chrome 480x300, and a `text(size=5)` on a phone is a
    5mm glyph. No coords_width step: a ui stage IS mm, so the numbers you type
    are the numbers on the glass.

    Every scene is a product shot: a mirror floor (reflector-ground), a
    shadow-casting key + rim, a studio HDR, onyx or tinted haze banks, film
    grain, and a `frame` camera program that closes in on the LIVE DISPLAY
    (`node=<device>` frames the screen, not the casing).

      01. bank      iphone · space-black · onyx studio · wallet, gradient card
      02. rings     iphone · porcelain · bronze studio · stat-rings on ring-fill
      03. music     iphone · graphite · cool studio · now playing, waveform bars
      04. tablet    ipad · warm · editorial travel cover, image + text-block
      05. analytics laptop · space-black · onyx · dark dashboard, charts + table
      06. ide       laptop · cool · editor with tree, tabs, syntax runs, terminal
      07. imac      imac · daylight interior · design tool, panels, artboards
      08. browser   chrome window · SaaS landing page, glass hero, pricing
      09. handoff   iphone -> laptop · checkout on the phone lands on the desk
      10. family    imac + laptop + ipad + iphone · one system, four glasses

    AUTHORING NOTE — only the tags in the emitter's CONTENT_TAGS list group into
    a parent's <children>; everything else (paragraph, headline, rich-text-block,
    input-*, action-set, window-frame, cursor) is emitted loose and is appended
    AFTER its plain siblings at parse time, silently reordering the flex. Each
    one below therefore sits in its own
    `card(w=hug h=hug fill=transparent shadow=false)`.

    Capture: `nx run tools:capture:webgl -- --project promos/primitives/uis/ui/ui-devices.promo`
    Preview: /packages/runtime/index.html?project=promos/primitives/uis/ui/ui-devices.promo
promo#ui-devices
  // =======================================================================
  // 01 · BANK — iphone, onyx studio, a wallet with a gradient card
  // =======================================================================
  scene#s01-bank(duration=8 transition=none)
    renderer(tone_mapping=None shadow_map=true)
    camera(type=perspective fov=32 near=8.5 far=17000 position="0 190 900" look_at="0 90 0" dof_range=500 dof_blur=4.32)
      properties
        frame(smooth=0.35)
          keyframes
            kf(time=0 position="60 200 980" look_at="0 90 0" fov=32)
            kf(time=1.4 node=s01-phone fill=74 side=front easing=easeInOutCubic)
            kf(time=3.2 node=s01-phone fill=74 side=front easing=linear)
            kf(time=4.6 node=s01-phone fill=125 side=front offset="0 22 0" easing=easeInOutCubic)
            kf(time=6.4 node=s01-phone fill=125 side=front offset="0 -34 0" easing=linear)
            kf(time=8 node=s01-phone fill=80 side=front easing=easeInOutCubic)
    background(top=#2a2a30 bottom=#08080a)
    lights
      light(type=ambient color=#ffffff intensity=0.3)
      light(type=directional color=#f4f1ea intensity=3.2 position="-340 468 425" cast_shadow=true)
        shadow(radius=4 bias=-0.0002 map_size="2048 2048")
          camera(near=10 far=3600 left=-900 right=900 top=600 bottom=-300)
      light(type=directional color=#c2cad4 intensity=0.7 position="383 -127 340")
      light(type=directional color=#d8dee8 intensity=2.4 position="140 300 -540")
    environment(hdr="photo_studio_01_2k" as_background=false background_color=#0b0b0b exposure=1.15 blurriness=0.16 intensity=1.0 environment_rotation_y_deg=35)
    haze#s01-hz-a(opacity=0.85 color=#2c2d34 size="5200 3000" pulse=0 decay=0 position="-900 900 -1500")
      position
        0 0 0 0