html-engraved

HTML UIs ENGRAVED into device glass — the html-devices reel, re-lit.

Read the rig's notes

Same ten premium screens, but every device carries `screen-relief=<bump>`:
the live display becomes a lit `physical` glass whose bump map is the SAME
page rastered as a height map (`relief=luma`, `screen-relief-blur` CSS px,
`screen-relief-invert` — true = the UI is cut INTO the glass, false =
embossed out of it), self-lit through an emissive copy so it still glows
like a display. `screen-metalness` / `screen-roughness` / `screen-emissive`
/`screen-clearcoat` dress the glass (an etched-metal screen at metalness
.35). A raking directional light sweeps across every scene so the relief
catches; frames are pushed ~30% closer than html-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

Preview: /packages/runtime/index.html?project=promos/primitives/html/html-engraved.promo

Topic: uis
Scenes: 10
Kind: reference rig

//
    HTML UIs ENGRAVED into device glass — the html-devices reel, re-lit.

    Same ten premium screens, but every device carries `screen-relief=<bump>`:
    the live display becomes a lit `physical` glass whose bump map is the SAME
    page rastered as a height map (`relief=luma`, `screen-relief-blur` CSS px,
    `screen-relief-invert` — true = the UI is cut INTO the glass, false =
    embossed out of it), self-lit through an emissive copy so it still glows
    like a display. `screen-metalness` / `screen-roughness` / `screen-emissive`
    /`screen-clearcoat` dress the glass (an etched-metal screen at metalness
    .35). A raking directional light sweeps across every scene so the relief
    catches; frames are pushed ~30% closer than html-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

    Preview: /packages/runtime/index.html?project=promos/primitives/html/html-engraved.promo
promo#html-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-rake(type=directional color=#ffffff intensity=1.5 position="-700 200 500")
        position
          0 -700 200 500
          4 easeInOutSine 700 260 500
          8 easeInOutSine -700 200 500
      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")
    postprocessing
      step(name=render)
      step(name=unreal_bloom strength=0.14 radius=0.45 threshold=0.95)
      step(name=film_grain grain=0.04 scanlines=0 vignette=0.22 vignette_start=0.5 output_transform=1 exposure=1.0)
      step(name=fxaa)
    text#e01-title(text="01 · wallet · engraved · glass" kind=layer color=#f5f5f7 weight=700 size=800 worldHeight=18 align=center position="0 300 -200")
    source#e01