Hover Reveal Text Gallery
A list of text rows, each hiding a photograph that wipes open under the cursor and follows it.
- Category
- Patterns
- Added
- 2026-09-20
- Deps
- none
- Updated
- 2026-09-20
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.
The cuts
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
// ---------------------------------------------------------------
}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.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Link Peek Preview
patternsAn index list that floats a velocity-tilted preview card beside the pointer.
Expanding Panel Row
patternsA row of panels where the hovered one grows and its neighbours compress.
Spotlight List Focus
patternsA list that dims and blurs every row except the one under the pointer.