Persona Telescopium is a full-bleed hero section built for one moment: the scroll that takes a visitor from "here's who's been here before" to "here's who's hosting you." It opens on a scattered wall of guest polaroids under a two-line heading. As the visitor scrolls, the polaroids fade, the heading splits and slides apart, and a masked photo of your host telescopes in from that exact spot closing on a guest testimonial quote laid over the reveal.
It's built for hospitality, boutique stays, hosted experiences, and any brand where the story is "people who've been here, meet the person who'll take care of you next."
Key Features
Two-phase scroll narrative — guest wall → heading split → telescoping mask reveal → testimonial quote, all scrubbed to scroll position, not autoplay
Manual mask upload — bring your own silhouette/cutout for full control over the reveal shape; no black-box auto-detection
Scattered polaroid layout — 6 preset positions on desktop, gracefully drops to 4 in a simplified layout under 680px so nothing crowds on mobile
Fully typographic control — three independent Font controls (heading, quote, guest captions) plus an adjustable gap between the two halves of the split heading, so spacing holds up whatever font you land on
Built to scroll cleanly inside Framer — uses a position: sticky inner layer instead of a pinned spacer, so it plays nicely with Framer's native Smooth Scrolling and Stack layout instead of fighting it
Semantic, accessible markup — real <h2> headings (not styled divs), proper alt text on the host photo, decorative telescope layers correctly hidden from screen readers
Performance-conscious scroll handler — batches all per-frame updates into a minimal number of GSAP calls rather than one per element, so the animation stays smooth even with a full guest wall and a long testimonial
Persona Telescopium is a full-bleed hero section built for one moment: the scroll that takes a visitor from "here's who's been here before" to "here's who's hosting you." It opens on a scattered wall of guest polaroids under a two-line heading. As the visitor scrolls, the polaroids fade, the heading splits and slides apart, and a masked photo of your host telescopes in from that exact spot closing on a guest testimonial quote laid over the reveal.
It's built for hospitality, boutique stays, hosted experiences, and any brand where the story is "people who've been here, meet the person who'll take care of you next."
Key Features
Two-phase scroll narrative — guest wall → heading split → telescoping mask reveal → testimonial quote, all scrubbed to scroll position, not autoplay
Manual mask upload — bring your own silhouette/cutout for full control over the reveal shape; no black-box auto-detection
Scattered polaroid layout — 6 preset positions on desktop, gracefully drops to 4 in a simplified layout under 680px so nothing crowds on mobile
Fully typographic control — three independent Font controls (heading, quote, guest captions) plus an adjustable gap between the two halves of the split heading, so spacing holds up whatever font you land on
Built to scroll cleanly inside Framer — uses a position: sticky inner layer instead of a pinned spacer, so it plays nicely with Framer's native Smooth Scrolling and Stack layout instead of fighting it
Semantic, accessible markup — real <h2> headings (not styled divs), proper alt text on the host photo, decorative telescope layers correctly hidden from screen readers
Performance-conscious scroll handler — batches all per-frame updates into a minimal number of GSAP calls rather than one per element, so the animation stays smooth even with a full guest wall and a long testimonial
Jane
