html-fly

HTML flying out of devices — ten html3d choreographies.

Read the rig's notes

`html3d(overlay=screen …)` inside a device is the html twin of the ui3d
overlay: every TOP-LEVEL markup child mounts as a REAL plane anchored flush
on the glass, in the screen's own px space (an iphone glass is 71×154mm,
`coords_width=390` lays the CSS out at phone px). Because each child is a
world plane, its delta tracks LEAVE the screen: `position` "dx dy dz" in mm
(+z toward the camera, y down like the page), `rotation` in degrees,
`scale`, `opacity`. The flat `html` behind it stays on the glass — that is
the app the parts jump out of, and back into.

01. peel iphone · notification cards peel off the glass one by one, hover, snap back
02. assemble iphone · the app flies IN from scattered origins (reverse of 01)
03. lift laptop · dashboard tiles rise to staggered depths, the chart swings out
04. handoff iphone → laptop · a receipt card leaves the phone and lands on the desk screen
05. fan ipad · photo cards fan out of the tablet into a 3D arc
06. widgets imac · widgets pop out and hover with a slow drift
07. modal chrome · a dialog jumps toward the camera, the page stays behind
08. bubbles iphone · chat bubbles leave the phone and stack in the world beside it
09. swarm laptop · twelve tiles converge from twelve origins into the grid
10. layers iphone · the UI splits into z-layers, one card flies THROUGH the lens

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

Topic: uis
Scenes: 10
Kind: reference rig

//
    HTML flying out of devices — ten html3d choreographies.

    `html3d(overlay=screen …)` inside a device is the html twin of the ui3d
    overlay: every TOP-LEVEL markup child mounts as a REAL plane anchored flush
    on the glass, in the screen's own px space (an iphone glass is 71×154mm,
    `coords_width=390` lays the CSS out at phone px). Because each child is a
    world plane, its delta tracks LEAVE the screen: `position` "dx dy dz" in mm
    (+z toward the camera, y down like the page), `rotation` in degrees,
    `scale`, `opacity`. The flat `html` behind it stays on the glass — that is
    the app the parts jump out of, and back into.

      01. peel       iphone · notification cards peel off the glass one by one, hover, snap back
      02. assemble   iphone · the app flies IN from scattered origins (reverse of 01)
      03. lift       laptop · dashboard tiles rise to staggered depths, the chart swings out
      04. handoff    iphone → laptop · a receipt card leaves the phone and lands on the desk screen
      05. fan        ipad · photo cards fan out of the tablet into a 3D arc
      06. widgets    imac · widgets pop out and hover with a slow drift
      07. modal      chrome · a dialog jumps toward the camera, the page stays behind
      08. bubbles    iphone · chat bubbles leave the phone and stack in the world beside it
      09. swarm      laptop · twelve tiles converge from twelve origins into the grid
      10. layers     iphone · the UI splits into z-layers, one card flies THROUGH the lens

    Capture: `nx run tools:capture:browser -- --project promos/primitives/html/html-fly.promo`
    Preview: /packages/runtime/index.html?project=promos/primitives/html/html-fly.promo
promo#html-fly
  // =======================================================================
  // 01 · PEEL — cards peel off the phone toward the camera, then snap back
  // =======================================================================
  scene#s01-peel(duration=8 transition=match-move transition-duration=0.8)
    camera(type=perspective fov=36 near=8.5 far=17000 position="0 0 420" look_at="0 0 0")
      position
        0 30 10 450
        3.5 easeInOutCubic -50 16 390
        8 easeInOutCubic 0 0 420
      look_at
        0 0 0 0
        8 easeInOutCubic 0 0 0
    background(top=#0b1020 bottom=#04060c)
    lights
      light(type=ambient color=#8fb2ff intensity=0.6)
      light(type=directional color=#ffffff intensity=2.1 position="340 680 510")
      light(type=directional color=#7aa2ff intensity=0.9 position="-510 170 340")
    environment(hdr="studio_small_04_2k" as_background=false background_color=#05070f exposure=1.0 blurriness=0.5 intensity=0.5)
    postprocessing
      step(name=render)
      step(name=unreal_bloom strength=0.18 radius=0.45 threshold=0.88)
    haze#s01-hz-a(match=hz-a blend=add opacity=0.24 position="-380 200 -600" color=#2563EB size="2400 1800" pulse=0 decay=0)
      position
        0 0 0 0
        8 easeInOutSine 60 -30 0
    haze#s01-hz-b(match=hz-b blend=add opacity=0.2 position="360 -160 -620" color=#7C3AED size="2600 2000" pulse=0 decay=0)
    haze#s01-hz-c(match=hz-c blend=add opacity=0.16 position="40 240 -640" color=#00C8FF size="1600 1300" pulse=0 decay=0)
    text#s01-title(text="peel" kind=layer size=220 worldHeight=24 color=#eaf4ff weight=800 align=center position="0 200 40")
    text#s01-sub(text="html3d overlay · each card is a plane on the glass, and a +z track lifts it off" kind=layer size=120 worldHeight=12 color=#8ea3c8 weight=500 align=center position="0 172 40")
    iphone#s01-phone(body=space-black body-scope=all safe-top=off rotation="0 -10 0" position="0 -14 0")
      rotation
        0 0 0 0
        8 easeInOutSine 0 22 0
      html(width=71 height=154 coords_width=390 fill=#0b0d14)
        style(text=".app{height:100%;box-sizing:border-box;padding:66px 22px;font-family:-apple-system,system-ui,sans-serif;color:#eef0f6;background:radial-gradient(120% 60% at 50% -10%,#1b2340,#0b0d1