html-maps

HTML → every material map. Thirty scenes, one map (or one combo) each, always the SAME dashboard page so the maps compare like for like.

Read the rig's notes

An `html` is a source under ANY `<slot>_from`. Rendered as colour it is the
page; rendered with `relief=` it is DATA — luma / alpha / ao / depth height,
or `relief=normal` (Sobel normals). So one page can be the map, the
emissive, the roughness, the bump, the parallax height, the cut-out, the
lacquer mask, the sheen tint… of one material. Devices take the same blocks
as children of the tag (`iphone > roughness_map_from > html`) plus
`screen-<prop>` scalars. `emit=<n>` makes a page a RectAreaLight.

  01 bump          02 displacement    03 normal          04 roughness
  05 metalness     06 emissive        07 alpha cut-out   08 ao
  09 clearcoat     10 clearcoat rough 11 sheen colour    12 transmission
  13 thickness     14 iridescence     15 anisotropy      16 specular int.
  17 specular col. 18 light map       19 parallax (POM)  20 relief=depth
  21 emit · html3d 22 emit · page     23 laptop combo    24 ipad parallax
  25 iphone irid.  26 imac etched     27 chrome glass    28 iphone velvet
  29 laptop lacquer 30 iphone everything

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

Topic: uis
Scenes: 30
Kind: reference rig

//
    HTML → every material map. Thirty scenes, one map (or one combo) each,
    always the SAME dashboard page so the maps compare like for like.

    An `html` is a source under ANY `<slot>_from`. Rendered as colour it is the
    page; rendered with `relief=` it is DATA — luma / alpha / ao / depth height,
    or `relief=normal` (Sobel normals). So one page can be the map, the
    emissive, the roughness, the bump, the parallax height, the cut-out, the
    lacquer mask, the sheen tint… of one material. Devices take the same blocks
    as children of the tag (`iphone > roughness_map_from > html`) plus
    `screen-<prop>` scalars. `emit=<n>` makes a page a RectAreaLight.

      01 bump          02 displacement    03 normal          04 roughness
      05 metalness     06 emissive        07 alpha cut-out   08 ao
      09 clearcoat     10 clearcoat rough 11 sheen colour    12 transmission
      13 thickness     14 iridescence     15 anisotropy      16 specular int.
      17 specular col. 18 light map       19 parallax (POM)  20 relief=depth
      21 emit · html3d 22 emit · page     23 laptop combo    24 ipad parallax
      25 iphone irid.  26 imac etched     27 chrome glass    28 iphone velvet
      29 laptop lacquer 30 iphone everything

    Preview: /packages/runtime/index.html?project=promos/primitives/html/html-maps.promo
promo#html-maps
  scene#m01-bump(duration=7 transition=none)
    camera(type=perspective fov=32 near=1 far=8000 position="0 120 700" look_at="0 0 0")
      position
        0 -160 160 700
        3.5 easeInOutSine 160 100 660
        7 easeInOutSine -160 160 700
    background(top=#14141a bottom=#050507)
    lights
      light(type=ambient color=#ffffff intensity=0.22)
      light#m01-bump-rake(type=directional color=#ffffff intensity=2.2 position="-700 220 500")
        position
          0 -700 220 500
          3.5 easeInOutSine 700 280 500
          7 easeInOutSine -700 220 500
      light(type=directional color=#9ab0ff intensity=0.7 position="500 -100 300")
    environment(hdr="studio_small_04_2k" as_background=false exposure=1.0 blurriness=0.35 intensity=0.6)
    postprocessing
      step(name=render)
      step(name=unreal_bloom strength=0.14 radius=0.45 threshold=0.9)
      step(name=film_grain grain=0.03 scanlines=0 vignette=0.22 vignette_start=0.5 output_transform=1 exposure=1.0)
    haze#m01-bump-hz(opacity=0.5 color=#22232a size="3600 2400" pulse=0 decay=0 position="-500 500 -1200")
    text#m01-bump-title(text="01 · bump_map_from — per-pixel edge shading from the page height (relief=luma) · no geometry" kind=layer size=600 worldHeight=14 color=#8ea3c8 weight=600 align=center position="0 230 0")
    primitive#m01-bump-pl(position="0 0 0" rotation="-18 0 0")
      geometry(type=plane width=600 height=340)
      material(ref=physical color=#ffffff metalness=0.1 roughness=0.45 bump-scale=2.4)
        map_from(flip_y=false)
          html(width=600 height=340 coords_width=1200 fill=#0b0d14)
            style(text=".d{height:100%;box-sizing:border-box;padding:44px 48px;display:grid;grid-template-columns:200px 1fr;gap:26px;font-family:-apple-system,system-ui,sans-serif;color:#eef0f6;background:#0b0d14} nav{display:flex;flex-direction:column;gap:8px} nav b{display:flex;align-items:center;gap:10px;font-size:22px;margin-bottom:14px} nav b i{width:24px;height:24px;border-radius:8px;background:linear-gradient(135deg,#5b8cff,#c14bff)} nav span{padding:10px 12px;border-radius:10px;color:#8b93a7;font-size:15px;font-weight:600} nav span.on{background:#151827;color:#fff} main{display:grid;grid-template-rows:auto auto 1fr;gap:18px} h1{margin:0;font-size:30px;letter-spacing:-0.02em} .k{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .k div{background:linear-gradient(180deg,#141728,#0d0f16);border:1px solid #232a3d;border-radius:18px;padding:16px 18px} .k small{display:block;color:#8b93a7;font-size:11px;letter-spacing:.12em;text-transform:uppercase} .k b{display:block;font-size:30px;letter-spacing:-0.03e