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.
DOM + CSS0 deps1 file · 11 KB TSXreduced-motion aware
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
// ---------------------------------------------------------------
}Details
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.
