A clipped media frame that opens to full bleed as the page scrolls past it.
About this tool
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.
Scroll · HTML / CSS / JS · All tools