Aperture Scroll
Scroll, and the headline parts as a small window opens to fill the screen.
Features
- The window opens from the gap between the headline's halves
- Driven by scroll, so visitors set the pace
- Buttons can't be tabbed to until they're showing
- Opens straight away for reduced motion
Best for: Launches and product reveals that want the first scroll to feel like an event.
Installation
npm install motion lucide-react @radix-ui/react-slot class-variance-authority clsx tailwind-mergeThen copy the files from the Code tab into the same paths in your project, in TypeScript or JavaScript.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| titleStart | string | - | The headline's first half, left of the window. |
| titleEnd | string | - | The second half, right of the window. |
| description | string | - | The pitch shown once the window is open. |
| primaryCta | { label: string; href: string } | - | The white button. |
| secondaryCta | { label: string; href: string } | - | Optional second button. |
| scrollScreens | number | 3 | How many screens of scrolling the opening takes. |
| className | string | - | Extra classes for the section. |
FAQ
Is the Aperture Scroll free to use?
Yes. Aperture Scroll is free to copy into your own projects. Open the Code tab and paste the files into your app.
Does Aperture Scroll work with Next.js and React?
Yes. It's a React client component made for the Next.js App Router, styled with Tailwind CSS and animated with Framer Motion (the motion package).
Can I use Aperture Scroll in JavaScript instead of TypeScript?
Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.
What does Aperture Scroll need installed?
motion, lucide-react, @radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge, plus the shared helpers from the Installation page.
Is Aperture Scroll accessible?
Every link and button is reachable by keyboard with a visible focus ring, and the animation stays still for visitors who ask for reduced motion.