August 4, 2026/Intermediate/Scroll & Parallax/Exo Ape ↗

Exo Ape Play Reel

Replication of Exo Ape's homepage showreel. A 200vh section pins for one viewport while a centered video thumbnail scrubs from ~27vw up to fullscreen and the giant words 'Play' and 'Reel' slide in from the viewport edges to meet as a centered phrase over the footage. Words enter via one-time overflow-hidden mask reveals; the label and body copy stay pinned above the video, and a circular 'Play' chip trails the mouse like the original's custom cursor. Framer-motion useScroll/useTransform + spring-follow cursor, IntersectionObserver playback gating, reduced-motion static fallback.

Live Demo ↗

Preview

Work in motion

Play

Reel

Our work is best experienced in motion. Don’t forget to put on your headphones.

Play

Source

import ExoApePlayReel from "./index.jsx";
import styles from "./styles.module.css";

// Spacer panels above/below so the sticky pin + scrub are visible in the gallery.
export default function ExoApePlayReelDemo(props) {
  return (
    <div>
      <div className={styles.spacer}>
        <span className={styles.spacerLabel}>Scroll down ↓</span>
      </div>
      <ExoApePlayReel {...props} />
      <div className={styles.spacer}>
        <span className={styles.spacerLabel}>… and the reel releases</span>
      </div>
    </div>
  );
}

Dependencies

framer-motion

Related Components

NEW5D AGO

Garoa Video Scrollscroll-parallax

NEW5D AGO

Relai Parallax Scroll Heroscroll-parallax

3MO AGO

Parallax Image Bandscroll-parallax