Before After Gallery
Before and after, compared by dragging a liquid seam across each photo, then the rest of the gallery.
Controls
<GalleryBeforeAfter />About
Built on Liquid Before/After for businesses whose work is a transformation.
Use it when
- The work is a visible change.
Skip it when
- No real before-and-after photos are coming: use
gallery-grid.
Install
The demo above is live today. Installing Pro items opens with VibeBox Motion Pro; join the waitlist to hear first.
Code
The source is part of VibeBox Motion Pro.
Licensed per seat; it installs with the same shadcn command once Pro opens.
See Pro and join the waitlistContent
Typed slots from schema.ts. Facts (hours, prices, quotes, names) come only from the business; until then they render as fill-ins.
| Slot | Label | Type | Limit | Fact |
|---|---|---|---|---|
| eyebrow | Kicker | text | 32 chars | — |
| heading | Heading | text | 60 chars | — |
| lead | Intro | text | 160 chars | — |
| items | Images | list | up to 12 | — |
| items[].media | Image | image | — | — |
| items[].caption | Caption | text | 60 chars | Can be a fill-in |
| comparisons | Before and after pairs | list | up to 3 | — |
| comparisons[].before | Before photo | image | — | — |
| comparisons[].after | After photo | image | — | — |
| comparisons[].beforeLabel | Before label | text | 16 chars | — |
| comparisons[].afterLabel | After label | text | 16 chars | — |
| comparisons[].caption | Caption | text | 80 chars | Can be a fill-in |
Variants
Stackeddefault
stacked
Comparisons full width, thumbnails beneath.
Side
side
The first pair large left; more pairs and thumbnails right.
Accessibility and motion
- Keyboard
- Each comparison's range input (arrow keys).
- Screen readers
- Each pair is a labelled range with both photos' alt text; thumbnails are figures.
- Touch
- Drag the seam with a finger.
- Reduced motion
- The seam moves without its liquid wobble.
Edge cases and limits
- Scenes cannot be compared: they show side by side.
- Labels are fields (the component draws them).
Related
Photos behind reeded glass that clears where the pointer passes, for interiors, spas and boutiques.
Gallery block · WebGL2
A swipeable row that snaps one photo at a time, each turning in 3D as it leaves the centre.
Gallery block · Server
Gallery Grid
FreePhotos of the work or the place in an even grid or with the first image large, with captions.
Gallery block · Server