html-devices

HTML on devices — ten product shots, every screen a REAL HTML page.

Read the rig's notes

The companion to html.promo: same `html` stage, but always inside a device
(`iphone` / `ipad` / `laptop` / `imac` / `chrome`), authored the way a phone
page is authored — `coords_width=390` lays the DOM out at CSS px and the
stage scales it onto the real mm glass. Every screen is a self-contained
premium design system (glass cards, gradient type, conic rings, staggered
@keyframes, CSS-only charts), and every scene is a product shot: a mirror
floor (reflector-ground), a shadow-casting key + rim, a studio HDR, onyx or
tinted haze banks, film grain, and a `frame` camera program that closes in
on the LIVE DISPLAY (`node=<device>` frames the screen, not the casing).

01. bank iphone · space-black · onyx studio · wallet, gradient card
02. rings iphone · porcelain · bronze studio · conic-gradient rings, --p
03. music iphone · graphite · cool studio · blurred art, waveform
04. tablet ipad · warm · editorial travel cover, full-bleed images
05. analytics laptop · space-black · onyx · dark dashboard, CSS charts
06. ide laptop · cool · editor with tree, tabs, minimap, terminal
07. imac imac · daylight interior · design tool, panels, artboards
08. browser chrome window · SaaS landing page, glass hero
09. handoff iphone → laptop · checkout on the phone lands on the desk
10. family imac + laptop + ipad + iphone · one design system, four glasses

Capture: `nx run tools:capture:browser -- --project promos/primitives/html/html-devices.promo`
Preview: /packages/runtime/index.html?project=promos/primitives/html/html-devices.promo

Topic: uis
Scenes: 10
Kind: reference rig

//
    HTML on devices — ten product shots, every screen a REAL HTML page.

    The companion to html.promo: same `html` stage, but always inside a device
    (`iphone` / `ipad` / `laptop` / `imac` / `chrome`), authored the way a phone
    page is authored — `coords_width=390` lays the DOM out at CSS px and the
    stage scales it onto the real mm glass. Every screen is a self-contained
    premium design system (glass cards, gradient type, conic rings, staggered
    @keyframes, CSS-only charts), and every scene is a product shot: a mirror
    floor (reflector-ground), a shadow-casting key + rim, a studio HDR, onyx or
    tinted haze banks, film grain, and a `frame` camera program that closes in
    on the LIVE DISPLAY (`node=<device>` frames the screen, not the casing).

      01. bank      iphone · space-black · onyx studio · wallet, gradient card
      02. rings     iphone · porcelain · bronze studio · conic-gradient rings, --p
      03. music     iphone · graphite · cool studio · blurred art, waveform
      04. tablet    ipad · warm · editorial travel cover, full-bleed images
      05. analytics laptop · space-black · onyx · dark dashboard, CSS charts
      06. ide       laptop · cool · editor with tree, tabs, minimap, terminal
      07. imac      imac · daylight interior · design tool, panels, artboards
      08. browser   chrome window · SaaS landing page, glass hero
      09. handoff   iphone → laptop · checkout on the phone lands on the desk
      10. family    imac + laptop + ipad + iphone · one design system, four glasses

    Capture: `nx run tools:capture:browser -- --project promos/primitives/html/html-devices.promo`
    Preview: /packages/runtime/index.html?project=promos/primitives/html/html-devices.promo
promo#html-devices
  // =======================================================================
  // 01 · BANK — iphone, onyx studio, a wallet with a gradient card
  // =======================================================================
  scene#s01-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=s01-phone fill=74 side=front easing=easeInOutCubic)
            kf(time=3.2 node=s01-phone fill=74 side=front easing=linear)
            kf(time=4.6 node=s01-phone fill=125 side=front offset="0 22 0" easing=easeInOutCubic)
            kf(time=6.4 node=s01-phone fill=125 side=front offset="0 -34 0" easing=linear)
            kf(time=8 node=s01-phone fill=80 side=front easing=easeInOutCubic)
    background(top=#2a2a30 bottom=#08080a)
    lights
      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#s01-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#s01-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#s01-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)