ui-engraved

UI ENGRAVED into device glass — the ui-devices reel, re-lit.

Read the rig's notes

The twin of html-engraved.promo. There, `screen-relief=<bump>` re-rasters
the SAME page as a height map (`relief=luma`) and hands it to the glass; a
ui stage cannot re-render itself as grayscale, so here the height map is
AUTHORED — every screen carries a `bump_map_from > source(factory="ui/scene")`
twin of itself drawn in grays, item for item. White is high, black is low,
so the layout you see in colour is exactly the layout cut into the glass.

Supplying that slot is what promotes the display from the plain unlit
`basic` texture to a lit `physical` surface, and every `screen-<prop>`
scalar then dresses it: `screen-metalness` / `screen-roughness` /
`screen-clearcoat` / `screen-emissive` (the self-lit copy that keeps it
reading as a display) and `screen-bump-scale` — NEGATIVE cuts the UI into
the glass, POSITIVE embosses it out. A raking directional light sweeps
across every scene so the relief catches, and the frames sit ~30% closer
than ui-devices.

01. bank engraved · glass 06. ide engraved · code
02. rings engraved · deep 07. imac embossed · design
03. music embossed · soft 08. browser engraved · web
04. tablet engraved · editorial 09. handoff engraved · handoff
05. analytics etched · metal 10. family engraved · family

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

Topic: uis
Scenes: 10
Kind: reference rig

//
    UI ENGRAVED into device glass — the ui-devices reel, re-lit.

    The twin of html-engraved.promo. There, `screen-relief=<bump>` re-rasters
    the SAME page as a height map (`relief=luma`) and hands it to the glass; a
    ui stage cannot re-render itself as grayscale, so here the height map is
    AUTHORED — every screen carries a `bump_map_from > source(factory="ui/scene")`
    twin of itself drawn in grays, item for item. White is high, black is low,
    so the layout you see in colour is exactly the layout cut into the glass.

    Supplying that slot is what promotes the display from the plain unlit
    `basic` texture to a lit `physical` surface, and every `screen-<prop>`
    scalar then dresses it: `screen-metalness` / `screen-roughness` /
    `screen-clearcoat` / `screen-emissive` (the self-lit copy that keeps it
    reading as a display) and `screen-bump-scale` — NEGATIVE cuts the UI into
    the glass, POSITIVE embosses it out. A raking directional light sweeps
    across every scene so the relief catches, and the frames sit ~30% closer
    than ui-devices.

      01. bank       engraved · glass        06. ide       engraved · code
      02. rings      engraved · deep         07. imac      embossed · design
      03. music      embossed · soft         08. browser   engraved · web
      04. tablet     engraved · editorial    09. handoff   engraved · handoff
      05. analytics  etched · metal          10. family    engraved · family

    Capture: `nx run tools:capture:webgl -- --project promos/primitives/uis/ui/ui-engraved.promo`
    Preview: /packages/runtime/index.html?project=promos/primitives/uis/ui/ui-engraved.promo
promo#ui-engraved
  // =======================================================================
  // 01 · BANK — iphone, onyx studio, a wallet with a gradient card
  // =======================================================================
  scene#e01-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=e01-phone fill=96 side=front easing=easeInOutCubic)
            kf(time=3.2 node=e01-phone fill=96 side=front easing=linear)
            kf(time=4.6 node=e01-phone fill=162 side=front offset="0 22 0" easing=easeInOutCubic)
            kf(time=6.4 node=e01-phone fill=162 side=front offset="0 -34 0" easing=linear)
            kf(time=8 node=e01-phone fill=104 side=front easing=easeInOutCubic)
    background(top=#2a2a30 bottom=#08080a)
    lights
      light#e01-bank-rake(type=directional color=#ffffff intensity=1.6 position="-700 200 500")
        position
          0 0 0 0
          4 easeInOutSine 1400 80 0
          8 easeInOutSine 0 0 0
      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#e01-hz-a(opacity=0.85 color=#2c2d34 size="5200 3000" pulse=0 decay=0 position="-900 900 -1500")
      position
        0 0 0 0
        8 easeInOutSine 300 -120 0
    haze#e01-hz-b(blend=add opacity=0.08 color=#8A8A8A size="4600 3200" pulse=0 decay=0 position="800 800 -1495")
      position
        0 0 0 0
        8 easeInOutSine -260 140 0
    haze#e01-hz-c(opacity=0.7 color=#000000 size="4200 2800" pulse=0 decay=0 position="-1200 600 -1485")
    p