Cinematic media chapter
One full-width chapter of a cinematic editorial page: a single wide image — full-bleed, or a borderless panel floating through a typographic field — whose movement is driven by the reader's scroll, plus the chapter's copy. Built for the About page on the same mechanics as PortraitCinemaHero (native-scroll sticky stage, smoothed inertial progress, no scroll hijacking), but a different composition: one image carrying one thought, no portrait field, no PhotoFrame mat.
The component owns stage mechanics only. It writes one custom property per frame — --p, the smoothed 0→1 chapter progress — and every motion rule is stylesheet CSS consuming it through tunable custom properties (--cmc-media-y-from/-to, --cmc-scale-to, --cmc-copy-hold, …), so a page art-directs a chapter by overriding vars in its own CSS.
The cinematic geometry engages only when the component stamps data-cine on the root — viewport ≥768px and reduced motion off. Without it (no JS, phones, reduced motion) the same DOM renders a complete still composition in normal flow: media as an intrinsic-ratio block, copy below — no blank track height. Scroll this page to run the pinned sequences; enable reduced motion in the OS to see the still alternative.
import from @halwel/ui/components/marketing/CinematicMediaChapter
Variants
About Halwel
A practice of health stewardship.
The copy holds, then departs upward as the reader moves on — tuned here with --cmc-copy-hold / --cmc-copy-out.
Questions belong in the room.
The panel enters from below mid-sequence (--cmc-media-in), travels upward through the type, and is deliberately borderless — no mat, no card, square edges.
The longer view
Agency should grow with you.
No pin: the section keeps its natural height and --p is how far it has traveled through the viewport, producing only a shallow drift (max scale 1.025 here).
The system around the person
Agency needs a system that holds.
The scrim is a localized directional gradient over the copy side — never a full-image overlay.