BeNorth Exo Ape Hero Combo
Mashup of the BeNorth.Studio sticker hero and Exo Ape's showreel scrub (exoape.com). A cream 200vh section pins for one viewport: the looping wordmark marquee and two layers of drifting, collision-free stickers form the base world while a centered video thumbnail scroll-scrubs from 25.5vw up to full bleed, swallowing the collage before the section releases. The placement algorithm seeds the thumbnail's footprint as an occupied rect so small stickers never spawn under it; sticker drift is driven by the pin's own scroll progress and gated by an IntersectionObserver that also toggles video playback. Framer-motion width/height scrub over a vanilla rAF drift loop (lerped cursor parallax + sine idle float). Reduced motion collapses to a static 100svh hero with authored sticker anchors and a paused thumbnail.
Preview
BeNorth.Studio
Source
"use client";
import BeNorthExoApeHeroCombo from "./index.jsx";
import { benorthExoApeHeroCombo } from "./data.js";
import styles from "./demo.module.css";
// Placed at the top of the page as a hero, with a section beneath it that
// scrolls into view once the reel has taken over and the pin releases.
export default function BeNorthExoApeHeroComboDemo() {
return (
<div>
<BeNorthExoApeHeroCombo {...benorthExoApeHeroCombo} />
<div className={styles.spacer}>
<span className={styles.spacerLabel}>Next section</span>
</div>
</div>
);
}
Dependencies
framer-motion
Related Components
