Hover Reveal Text Gallery
A list of text rows, each hiding a photograph that wipes open under the cursor and follows it.
DOM + CSS0 deps1 file · 5 KB TSX
Props
"use client";
import { useRef, useState } from "react";
type Row = { label: string; meta: string; src: string };
export function HoverRevealTextGallery({
eyebrow = "The cuts",
rows,
followStrength = 0.14,
showMeta = true,
}: {
eyebrow?: string;
rows: Row[];
followStrength?: number;
/** The right-hand meta column beside each title. */
showMeta?: boolean;
}) {
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this pattern
A local business usually has two things to say at once: what the service is called and what it actually looks like. A photo grid shows the pictures and buries the words; a plain price list shows the words and hides the work. This keeps the list as the primary structure and hands over a photograph only for the row the visitor is actually considering, so there is never more than one image competing for attention. Three decisions carry it. The panel follows the cursor with exponential smoothing rather than tracking it exactly — welded to the pointer it reads as a cursor artifact, lagging slightly it reads as a heavy object being dragged, and that weight is the entire impression being bought. The reveal is a clip-path wipe rather than a fade, so the image uncovers from its own edge instead of ghosting in over the background. And the rows that are not hovered drop to roughly a quarter opacity, which is what makes a long list feel like it is responding rather than merely highlighting one line. Pointer position is written to a transform through a ref, so a list of any length costs nothing per frame.
Curator’s note
Built for viberdy 2.2. The one component in the library most worth putting on a barber, restaurant or estate agency site — it shows the work without turning the page into a grid.
