Section Library

Before / After Comparison Slider

  • Interactive drag
  • Touch-ready
  • shadcn
Live preview
Full screen ↗
Loading preview…

Scroll & click inside the frame — it's the real section running with demo content

Step 1 — your customization message
Integrate the following section into my site, placing it [where on the page].
Replace ALL placeholder text and images with content for my project:
[1-2 sentences about your business/site].
My images are in [folder/paths]. Match the section's colors and fonts
to my site's existing design.

[PASTE THE FULL SECTION PROMPT HERE]
Step 2 — the prompt · Before / After Comparison Slider191 lines · 6,366 chars
You are given a task to integrate an existing React component in the codebase

The codebase should support:
- shadcn project structure  
- Tailwind CSS
- Typescript

If it doesn't, provide instructions on how to setup project via shadcn CLI, install Tailwind or Typescript.

What it is

Two images stacked on top of each other with a draggable handle in the middle — visitors drag left and right to reveal the “before” and “after.” Simple, interactive, and weirdly addictive.

Perfect for

Renovations, cleaning services, design work, restorations, fitness — any business whose entire pitch is a transformation. It's the interactive sibling of the Before/After hero animation from the hero lessons.

What to prepare

  • Two images of the exact same scene — same angle, same framing. This is non-negotiable: if the framing doesn't match, the slider effect falls apart.
  • 💡 Pro move: you already know how to make perfectly matched before/after pairs — it's the same start frame / end frame technique from the hero lesson. Generate the “after” using the “before” as a reference image.

Good to know

The demo uses placeholder screenshot images from the web — replace both with your own pair. Works with both mouse drag and touch out of the box.