Zoom-Through-Portal Scroll Transition Hero

What this builds

A full-viewport hero with a visual frame, window, or aperture in the center. As the user scrolls, the camera (viewport) appears to zoom through the frame: the frame scales up past the viewport edges, revealing the content behind/inside it. The effect transitions from the hero section into the next section as if the user has passed through a doorway.

• A pinned hero section that holds for a scroll distance while the zoom plays out
• A central frame element (image frame, device mockup, geometric shape, or text outline) that scales from its resting size to beyond-viewport scale
• Content visible through the frame that becomes the next section
• Parallax depth on surrounding elements (they scale/fade at a different rate)
• ScrollTrigger scrub for direct scroll-to-zoom mapping
• Clip-path or overflow masking to reveal the "inside" content through the frame
• Static fallback: hero shows at rest state, scroll proceeds normally

When to use / when not to

• Use for product landing pages where the product UI is "inside" the hero (a device mockup that zooms to fill the screen, transitioning into a product demo section).
• Use for brand pages with a strong visual metaphor (a door, window, lens, or portal).
• Do NOT use when the hero has dense readable text. The scaling makes text unreadable during the transition.
• Do NOT use on mobile-primary pages. The pinned scroll range (300-500vh) is long on small screens. Provide a simpler cross-fade or cut transition instead.
• Do NOT use this with lenis-smooth-scroll and gsap-scrolltrigger without careful initialization order. See integration notes.