ProScroll

Aperture Zoom

A framed image that opens to full-bleed as you scroll, parting the headline.

Loading
Usage 
import { ApertureZoom } from "./ApertureZoom";

<ApertureZoom
  title={["Open", "wide."]}
  caption={<p>Chapter one</p>}
>
  <img src="/hero.jpg" alt="…" />
</ApertureZoom>

About

The hero starts as a small, rounded window onto your image. As you scroll it widens to fill the screen like a camera aperture opening, the image eases back from a slight zoom, and the two words of the headline slide apart to make room, blended against the picture. A caption settles in once it's open. One sticky stage and one clip-path, painted in a single animation frame per scroll — any image, video or canvas works as the media.

What you get

  • Rebuild prompt

    One paste into Claude Code, Cursor, Codex or v0 rebuilds it byte for byte.

  • Source

    ApertureZoom.tsx + ApertureZoom.css — plain React and CSS, every comment kept.

  • Vite project

    A ready-to-run project with this exact example and pinned versions — unzip, install, run.

More like this

All components
↕ScrollNewFree
Open live demo →

Ink Reveal

Scroll

A paragraph that fills in word by word as you scroll through it.

↕ScrollNewPro
Open live demo →

Stack Scroll

Scroll

Cards that pin and pile into a deck as you scroll.

↕ScrollNewPro
Open live demo →

Horizontal Rail

Scroll

Scroll down, travel sideways: a pinned rail of panels with parallax.