screen-corners

UIS · SCREEN CORNERS — how a ui3d(overlay=screen) card meets each device's rounded glass. The overlay is a flat plane the engine does NOT mask to the glass, so a square full-screen card shows its corners past the bezel. Every full-screen card on a screen (the root and any full-bleed background) carries r = the glass radius, in mm — one table for all of it: DEVICE_SCREEN_RADIUS_MM (packages/core/units.ts), measured off each device model's screen mesh: iphone 9.1 (rounded-[50px] at 390 px) · ipad 7 (rounded-[29px] at 820 px) laptop 4 (rounded-[13px] at 1152 px) · chrome 1 (rounded-[2px] at 1152 px) html_to_ui sets it on the block it returns; scripts/html-screens.mts does not — give the section the same rounded-[…px] and list `r` in sections.json. One device per scene, yawed and seen close — the angle where a square corner shows: s1 iphone r=0 (wrong: the corners poke past the glass) · s2 iphone r=9.1 s3 ipad r=7 · s4 laptop r=4 (One device per scene on purpose: a second device of the same type in a scene currently draws its screen overlay wrong — missing on the iPhone, dimmed on the iPad and laptop.)

Topic: uis
Scenes: 4
Kind: reference rig

//
    UIS · SCREEN CORNERS — how a ui3d(overlay=screen) card meets each device's rounded glass.
    The overlay is a flat plane the engine does NOT mask to the glass, so a square full-screen
    card shows its corners past the bezel. Every full-screen card on a screen (the root and any
    full-bleed background) carries r = the glass radius, in mm — one table for all of it:
    DEVICE_SCREEN_RADIUS_MM (packages/core/units.ts), measured off each device model's screen mesh:
      iphone 9.1 (rounded-[50px] at 390 px) · ipad 7 (rounded-[29px] at 820 px)
      laptop 4 (rounded-[13px] at 1152 px) · chrome 1 (rounded-[2px] at 1152 px)
    html_to_ui sets it on the block it returns; scripts/html-screens.mts does not — give the
    section the same rounded-[…px] and list `r` in sections.json.
    One device per scene, yawed and seen close — the angle where a square corner shows:
      s1 iphone r=0 (wrong: the corners poke past the glass) · s2 iphone r=9.1
      s3 ipad r=7 · s4 laptop r=4
    (One device per scene on purpose: a second device of the same type in a scene currently
    draws its screen overlay wrong — missing on the iPhone, dimmed on the iPad and laptop.)
promo#screen-corners(width=1920 height=1080 fps=30)
  scene#s1-iphone-square(duration=2)
    renderer(tone_mapping=None exposure=1)
    camera(type=perspective fov=30 near=5 far=20000 position="30 125 330" look_at="0 105 0")
    postprocessing
      step(name=render)
      step(name=output tone_mapping=none)
      step(name=aa method=ssaa samples=2)
    background(color=#1c1d22)
    environment(hdr="studio_small_04_2k" as_background=false intensity=0.6)
    iphone#ph-square(safe-top=off position="0 80 0" rotation="0 -22 0")
      ui3d#ph-square-stage(width=71 height=154 overlay=screen lift=0.5)
        card#ph-sq(x=0 y=0 w=71 h=154 r=0 fill=#7fdcae shadow=false clip=true)
          text(x=35.5 y=77 size=6 weight=800 color=#0b1311 align=center origin=center) "r=0"
  scene#s2-iphone-round(duration=2)
    renderer(tone_mapping=None exposure=1)
    camera(type=perspective fov=30 near=5 far=20000 position="30 125 330" look_at="0 105 0")
    postprocessing
      step(name=render)
      step(name=output tone_mapping=none)
      step(name=aa method=ssaa samples=2)
    background(color=#1c1d22)
    environment(hdr="studio_small_04_2k" as_background=false intensity=0.6)
    iphone#ph-round(safe-top=off position="0 80 0" rotation="0 -22 0")
      ui3d#ph-round-stage(width=71 height=154 overlay=screen lift=0.5)
        card#ph-rd(x=0 y=0 w=71 h=154 r=9.1 fill=#7fdcae shadow=false clip=true)
          text(x=35.5 y=77 size=6 weight=800 color=#0b1311 align=center origin=center) "r=9.1"
  scene#s3-ipad(duration=2)
    renderer(tone_mapping=None exposure=1)
    camera(type=perspective fov=30 near=5 far=20000 position="60 150 560" look_at="0 140 0")
    postprocessing
      step(name=render)
      step(name=output tone_mapping=none)
      step(name=aa method=ssaa samples=2)
    background(color=#1c1d22)
    environment(hdr="studio_small_04_2k" as_background=false intensity=0.6)
    ipad#pad-round(position="0 140 0" rotation="0 -22 0")
      ui3d#pad-round-stage(width=197 height=262 overlay=screen lift=0.5)
        card#pad-rd(x=0 y=0 w=197 h=262 r=7 fill=#7fdcae shadow=false clip=true)
          text(x=98.5 y=131 size=14 weight=800 color=#0b1311 align=center origin=center) "r=7"
  scene#s4-laptop(duration=2)
    renderer(tone_mapping=None exposure=1)
    camera(type=perspective fov=30 near=5 far=20000 position="90 240 900" look_at="0 30 -120")
    postprocessing
      step(name=render)
      step(name=output tone_mapping=none)
      step(name=aa method=ssaa samples=2)
    background(color=#1c1d22)
    environment(hdr="studio_small_04_2k" as_background=false intensity=0.6)
    laptop#lap-round(position="0 0 0" rotation="0 -18 0")
      ui3d#lap-round-stage(width=346 height=223 overlay=screen lift=0.5)
        card#lap-rd(x=0 y=0 w=346 h=223 r=4 fill=#7fdcae shadow=false clip=true)