Before / After
Drag a divider across the hero: the same business online in 1999, and today.
Features
- A full-screen comparison: drag the divider across the whole hero
- A real slider: arrow keys, Home and End all work
- Sweeps once on arrival so visitors know it moves
- The old site is decorative; the modern hero stays clickable everywhere
- Needs the font-retro token from globals.css
Best for: Agencies and redesign services: prove the upgrade in the first second instead of describing it.
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 |
|---|---|---|---|
| title | string | - | The headline. |
| accent | string | - | Optional ending in serif italic. |
| description | string | - | The line under the headline. |
| brand | string | - | The business name on the dated site. |
| primaryCta | { label: string; href: string } | - | The blue button. |
| secondaryCta | { label: string; href: string } | - | Optional second button. |
| eyebrow | ReactNode | - | Optional line above the headline. |
| className | string | - | Extra classes for the section. |
FAQ
Is the Before / After interactive section free to use?
Yes. Before / After is free to copy into your own projects. Open the Code tab and paste the files into your app.
Does Before / After 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 Before / After in JavaScript instead of TypeScript?
Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.
What does Before / After need installed?
motion, lucide-react, @radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge, plus the shared helpers from the Installation page.
Is Before / After 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.