ui-relief

UI as relief — the stage becomes a HEIGHT MAP.

Read the rig's notes

The twin of html-relief.promo, and the one place where the two grammars
genuinely differ. An `html` under a `<slot>_from` can be re-rastered as
DATA — `relief=luma` rewrites the page's own lightness as height — so the
SAME colourful page drives both `map_from` and `displacement_map_from`.
A ui stage has no such derivation: it cannot re-render itself as grayscale.

So the ui idiom inverts it — you AUTHOR the height map. A ui stage drawn in
grays IS a height field: white is high, black is low, and every card, rule
and glyph you place is geometry. `source(factory="ui/scene" …)` is accepted
under ANY texture slot (`displacement_map_from`, `bump_map_from`, …), so the
grayscale stage feeds `displacement-scale` (real geometry on a segmented
plane; negative = engraved, positive = embossed) and `bump_map_from` (the
same height shading the edges with no geometry). Author `color_space=linear`
on the slot — the RT is data, not colour. Scene 05 pairs a COLOUR stage on
`map_from` with its grayscale twin on `bump_map_from` for letterpress.

Two honest differences from the html reel: the ui text component draws in
one system sans stack (no Georgia), and there is no `relief_blur`, so the
bevel is the shape you draw rather than a blur radius. Everything else —
the plates, the lights, the sweep, the live engraving — is the same reel.

01. plaque engraved sans on brushed gold · orbit + light sweep
02. seal embossed monogram on matte black · rim light circles it
03. slab a paragraph pressed into slate · bump only, raking light
04. chisel a `typewriter` channel → the engraving grows live
05. pressed printed AND pressed: map_from + bump_map_from, two stages

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

Topic: uis
Scenes: 5
Kind: reference rig

//
    UI as relief — the stage becomes a HEIGHT MAP.

    The twin of html-relief.promo, and the one place where the two grammars
    genuinely differ. An `html` under a `<slot>_from` can be re-rastered as
    DATA — `relief=luma` rewrites the page's own lightness as height — so the
    SAME colourful page drives both `map_from` and `displacement_map_from`.
    A ui stage has no such derivation: it cannot re-render itself as grayscale.

    So the ui idiom inverts it — you AUTHOR the height map. A ui stage drawn in
    grays IS a height field: white is high, black is low, and every card, rule
    and glyph you place is geometry. `source(factory="ui/scene" …)` is accepted
    under ANY texture slot (`displacement_map_from`, `bump_map_from`, …), so the
    grayscale stage feeds `displacement-scale` (real geometry on a segmented
    plane; negative = engraved, positive = embossed) and `bump_map_from` (the
    same height shading the edges with no geometry). Author `color_space=linear`
    on the slot — the RT is data, not colour. Scene 05 pairs a COLOUR stage on
    `map_from` with its grayscale twin on `bump_map_from` for letterpress.

    Two honest differences from the html reel: the ui text component draws in
    one system sans stack (no Georgia), and there is no `relief_blur`, so the
    bevel is the shape you draw rather than a blur radius. Everything else —
    the plates, the lights, the sweep, the live engraving — is the same reel.

      01. plaque    engraved sans on brushed gold · orbit + light sweep
      02. seal      embossed monogram on matte black · rim light circles it
      03. slab      a paragraph pressed into slate · bump only, raking light
      04. chisel    a `typewriter` channel → the engraving grows live
      05. pressed   printed AND pressed: map_from + bump_map_from, two stages

    Capture: `nx run tools:capture:webgl -- --project promos/primitives/uis/ui/ui-relief.promo`
    Preview: /packages/runtime/index.html?project=promos/primitives/uis/ui/ui-relief.promo
promo#ui-relief
  // =======================================================================
  // 01 · PLAQUE — engraved on brushed gold
  // =======================================================================
  scene#r01-plaque(duration=8 transition=none)
    camera(type=perspective fov=32 near=1 far=8000 position="0 160 760" look_at="0 0 0")
      position
        0 -220 200 720
        4 easeInOutCubic 120 120 640
        8 easeInOutCubic 0 160 760
    background(top=#16151a bottom=#050507)
    lights
      light(type=ambient color=#ffffff intensity=0.2)
      light#r01-key(type=directional color=#fff1dc intensity=2.8 position="-400 300 300")
        position
          0 -500 260 300
          8 easeInOutSine 500 320 300
      light(type=directional color=#9ab0ff intensity=1.0 position="500 -100 200")
      light(type=area color=#ffe6b0 intensity=3 width=800 height=200 position="0 500 200" look_at="0 0 0")
    environment(hdr="photo_studio_01_2k" as_background=false exposure=1.0 blurriness=0.2 intensity=0.9 environment_rotation_y_deg=20)
    postprocessing
      step(name=render)
      step(name=unreal_bloom strength=0.12 radius=0.4 threshold=0.95)
      step(name=film_grain grain=0.03 scanlines=0 vignette=0.22 vignette_start=0.5 output_transform=1 exposure=1.0)
    haze#r01-hz(opacity=0.5 color=#2a2620 size="3600 2400" pulse=0 decay=0 position="-500 500 -1200")
    text#r01-title(text="01 · plaque — displacement-scale −3, bump-scale 2, both from one grayscale ui" kind=layer size=600 worldHeight=14 color=#8ea3c8 weight=600 align=center position="0 230 0")
    primitive#r01-plate(position="0 0 0" rotation="-24 0 0")
      geometry(type=plane width=600 height=320 segments="600 320")
      material(ref=physical color=#c9a24a metalness=0.92 roughness=0.34 displacement-scale=-3 displacement-bias=0 bump-scale=2 clearcoat=0.2)
        displacement_map_from(flip_y=false color_space=linear)
          source(factory="ui/scene" width=600 height