Phone frame explorer · v3
Bezel comparison · 360px wide
Three thinner-bezel variants of the line-art treatment plus the original control. Notch is now opaque (page-bg fill) so it occludes the iframe rather than letting content bleed through. All four frames render at 360px wide so they're directly comparable.
v2 (line-art, B was the picked baseline) at /v2.html · v1 (rejected solid-fill) at /v1.html
Frames · live the-weekly V3 · all 360px wide
Control · current portfolio frame
native 300 × 600 · scaled 1.2x · existing 1.5px royal-7 stroke + chrome bars
B1 · 27px bezel (new baseline)
native 427 × 864 · scaled 0.84x · screen 373 × 810 · notch top 20 · height 24
B2 · 20px bezel
native 427 × 864 · scaled 0.84x · screen 387 × 824 · notch top 15 · height 18
B3 · 14px bezel
native 427 × 864 · scaled 0.84x · screen 399 × 836 · notch top 10 · height 14
Changes from v2
- Notch fill — was
transparent (iframe content bled through), now var(--page-bg) (royal-2). Opaque, occludes the iframe behind it. The 1.5px outline still shows the notch shape.
- B1 is the same 27px-bezel variant from v2's variant B. Renamed.
- B2 — 20px bezel. Inner-bezel inset 3px. Notch top 15 / height 18.
- B3 — 14px bezel. Inner-bezel inset 2px. Notch top 10 / height 14. Notch becomes small at this bezel; reads more as a thin nub than a recognisable iPhone notch.
- Screen border-radius scales with bezel inset so the screen-corner-to-case-corner gap stays visually balanced. B1 40px, B2 46px, B3 52px.
- All 4 frames render at 360px wide via
transform: scale(). Internal pixel dimensions preserved.
Trade-offs to weigh
- B1 (27px) — most recognisable as a phone. Notch reads cleanly. Most "iPhone-like".
- B2 (20px) — slightly more screen real estate, notch still legible. Modern phone vibe.
- B3 (14px) — maximum screen, but notch reads as a small chip rather than a phone signifier. Could push toward dropping the notch entirely if going thinner.