Aperio Scroll

Aperio is a full-bleed scroll hero: your image fills the screen, then smoothly closes down into a small rounded frame as the headline slides away and a second line resolves word-by-word. Underneath, columns of thumbnails drift upward around a centered statement, two clustered columns per side on desktop, collapsing to one per side on tablet and phone so nothing crowds the text.

No GSAP, no Lenis, no SplitText required. it's built on a single visibility-gated scroll loop, so it stays light and pauses itself the moment it's off-screen.

Features:

• Full-bleed hero image with scroll-driven close-down to a custom frame size + radius

• Headline exit + word-by-word statement reveal, fully scroll-scrubbed

• Four-column parallax thumbnail grid that collapses to two (one per side) on tablet/phone

• Independent Font controls for headline, hero line, and paragraph with Framer's own per-breakpoint overrides fully respected

• Configurable smoothing (or set to 0 if your site already runs Lenis/smooth scroll)

• Responsive breakpoints for collapse width, edge spacing, thumbnail count and size

• Zero dependencies — pure React + IntersectionObserver, no bundle bloat

Best for: portfolio and brand sites, property/villa listings, agency case studies, anywhere a single striking image needs to introduce a page before handing off to content.