Portrait cinema hero

The full-viewport, scroll-pinned hero from the weight-loss page: a field of framed portraits scattered around a fixed statement, whooshing past it as the page scrolls — streaming up the axis of the scroll and swelling toward the camera, near frames first — until the field has emptied. Then the next section rolls up over the still-pinned stage like a sheet of paper (it wears hw-cinema-follower), the stage unpins beneath it, and the page continues with no seam and no dead screen.

Every portrait is the shared PhotoFrame — the signature cream mat — in a slot of a fixed arrangement (position, size, tilt, depth, in front of the copy or behind it, and a phone position or none). Portraits are assigned to slots in order, so the composition is a design decision rather than a function of which images are passed.

Motion is written imperatively from useScrollProgress — one inline transform per slot per frame, no React re-render per scroll event. The slot carries the whoosh, its child the idle float, and the frame the entrance fade, so the three transforms never contend. Portraits are pointer-events: none, so a front frame crossing the CTA can never intercept a click. Reduced motion collapses the track to one viewport: no pin, no whoosh, no overlap.

Scroll this page to run the sequence; the demo tiles are the real component at full size.