Duo

One fixed 1448×1086 @ 30fps composition: a photo of two hands holding an open foldable, with both screens blanked. You fill the two screen slots with HTML (live video, a mock chat, a scrolling feed, anything HyperFrames renders) and the rig masks it to the phone's true rounded-corner geometry.

The phone and hands are a photograph, not something you build. assets/plate.png IS the device. Never recreate, redraw, or CSS-model the foldable, its bezel, the hinge, or the hands, and never substitute a different image. build.mjs copies the plate into every project; if it is missing, stop and reinstall the skill rather than improvising a phone.

Do not edit the rig. The two .screen rects, their corner radii and the hinge divider were measured from that photo pixel by pixel. Every visual change you make happens inside #screen-left .content and #screen-right .content, plus the one shared GSAP timeline.