Seam Reveal Hero
A before-and-after hero with no handle: the seam is wherever your pointer is, eased like a curtain, and the colour arrives with the work.
- Category
- Heroes
- Added
- 2026-09-25
- Deps
- none
- Updated
- 2026-09-25
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Same room. One weekend.
Kitchen · Bedminster · 2 days
Props
"use client";
import { useEffect, useRef, useState } from "react";
/**
* SeamRevealHero — a before-and-after pair where the seam is wherever your
* pointer is.
*
* Two photographs fill the hero. Left of the seam is the room before; right of
* it, the room after. There is no handle to find and drag: the seam follows
* the pointer across the whole plate, eased so it feels like a curtain rather
* than a cursor, and it stays where you leave it. On a phone, drag. With a
* keyboard, the hairline is a slider.
*
* THE COLOUR ARRIVES WITH THE WORK. Before is flat greyscale, a little dark.
* After is greyscaled too, then multiplied into the field colour — the one
* saturated area on the page — so the seam does not just swap photographs,
* it brings the colour in. Both plates share one grain and contrast curve, so
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this heroe
Decorators, builders, detailers and salons all sell the same thing: the difference between before and after. The usual way to show it is a comparison slider with a handle in the middle, and the handle is the problem. It is a control to find and operate before the visitor has seen anything. Here the seam simply follows the pointer across the whole plate, eased so it moves like a curtain rather than a cursor, and it stays wherever it is left. On a phone it follows a drag; with a keyboard the hairline is a real slider with arrow keys. The plates are treated so the pair reads as one photograph: before is flat greyscale and a little dark, after is greyscaled and multiplied into the field colour, so the seam brings the colour in with the work. There is no React render per frame, the seam is written straight to the clip path from a time-based loop that stops when it settles, and reduced motion removes the easing. It needs a locked-tripod pair, and the note says so.
Curator’s note
Every before/after slider has a fat circle on the divider that the visitor has to find and drag. Removing the handle and letting the seam follow the pointer makes the hero itself the demonstration.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Headline Switch Hero
heroesThe second line of the headline is the navigation: KITCHENS / BATHROOMS / LOFTS at headline size, and choosing one swaps the treated photo plate, the copy and the price.
Logo Proof Hero
heroesA generous wordmark wall leads the hero, with a modest headline above it.
Waitlist Capture Hero
heroesA waitlist hero that actually captures: validation, pending, success and queue position.