Overview
A scroll-driven hero: the media starts as a rounded window holding a fraction of the stage, and the scroll opens it until it fills the viewport edge to edge. The image un-zooms as the frame widens, so the photograph reads as texture at rest and as composition once it lands, and the headline lifts away while an overlay fades in behind it — three crossfades on one timeline, all of them editable. The stage is sticky, so the expansion happens in place while a track underneath supplies the scroll it consumes; the hold control decides how long it stays open before the page moves on. It can be driven by the page it sits in or by its own container, and the smoothing is a real easing rather than a transition, so the frame keeps up with a trackpad flick instead of catching up after it. Swap the media, set the resting size and the corner radius, tune the distance and the hold, then export one self-contained HTML file.
Highlights
- Frame opens from a rounded window to full bleed on scroll
- Media un-zooms as the frame widens, so it is composed at both ends
- Headline, scroll hint and overlay cross-fade on the same timeline
- Driven by the page or by its own container, with easing rather than a transition