Skip to content

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.

ProEditorialeditorialminimal
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.

Preview
BeforeAfter

Same room. One weekend.

Kitchen · Bedminster · 2 days

Props

Tint the after plate
50
No runtime dependencies
"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
  // ---------------------------------------------------------------
}
Notes

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.

Related

Pairs well with

Matched on shared tags and category — the entries most likely to be used alongside this one.

Featured
New

The 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.

herotabslocal-business
Pro

A generous wordmark wall leads the hero, with a modest headline above it.

herologossocial-proof
Pro

A waitlist hero that actually captures: validation, pending, success and queue position.

herowaitlistform