html-relief

HTML as relief — the page becomes a HEIGHT MAP.

Read the rig's notes

An `html` under ANY texture slot's `<slot>_from` is a source, and with
`relief=luma` (or `relief=alpha`) its raster is rewritten as an opaque
grayscale height map — page lightness (or coverage) = height, `relief_blur`
(CSS px) softens the edge into a bevel, `relief_invert` flips it. Feed the
same page to `displacement_map_from` (real geometry on a segmented plane;
`displacement-scale` negative = engraved, positive = embossed) and to
`bump_map_from` (per-pixel shading of the edges), and type, icons, borders,
box-shadows — anything CSS paints — is cut into the material. Because it is
a live html stage, @keyframes still seek: scene 04 engraves a sentence letter
by letter.

  01. plaque    engraved serif 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    typewriter @keyframes → the engraving grows live
  05. pressed   printed AND pressed: map_from + bump_map_from from one page

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

Topic: uis
Scenes: 5
Kind: reference rig

//
    HTML as relief — the page becomes a HEIGHT MAP.

    An `html` under ANY texture slot's `<slot>_from` is a source, and with
    `relief=luma` (or `relief=alpha`) its raster is rewritten as an opaque
    grayscale height map — page lightness (or coverage) = height, `relief_blur`
    (CSS px) softens the edge into a bevel, `relief_invert` flips it. Feed the
    same page to `displacement_map_from` (real geometry on a segmented plane;
    `displacement-scale` negative = engraved, positive = embossed) and to
    `bump_map_from` (per-pixel shading of the edges), and type, icons, borders,
    box-shadows — anything CSS paints — is cut into the material. Because it is
    a live html stage, @keyframes still seek: scene 04 engraves a sentence letter
    by letter.

      01. plaque    engraved serif 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    typewriter @keyframes → the engraving grows live
      05. pressed   printed AND pressed: map_from + bump_map_from from one page

    Preview: /packages/runtime/index.html?project=promos/primitives/html/html-relief.promo
promo#html-relief
  // =======================================================================
  // 01 · PLAQUE — engraved serif on brushed gold
  // =======================================================================
  scene#s01-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#s01-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#s01-hz(opacity=0.5 color=#2a2620 size="3600 2400" pulse=0 decay=0 position="-500 500 -1200")
    text#s01-title(text="01 · plaque — displacement-scale −3, bump-scale 2" kind=layer size=600 worldHeight=14 color=#8ea3c8 weight=600 align=center position="0 230 0")
    primitive#s01-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)
          html(width=600 height=320 coords_width=1200 relief=luma relief_blur=1.4)
            style(text=".t{height:100%;box-sizing:border-box;padding:70px 90px;display:flex;flex-direction:column;justify-content:center;gap:24px;font-family:Georgia,'Times New Roman',serif;color:#fff;background:#000} .t b{font-size:150px;font-weight:700;letter-spacing:.06em;line-height:1} .t small{font-size:36px;letter-spacing:.42em;text-transform:uppercase;color:#bbb} .t hr{border:0;border-top:5px solid #fff;margin:0}")
            div.t
              small(text="Northstar · est. 2026")
              b(text="ENGRAVED")
              hr
              small(text="every letter is CSS, cut into the metal")
        bump_map_from(flip_y=false color_space=linear)
          html(width=600 height=320 coords_width=1200 relief=luma relief_blur=0.5)
            style(text=