Index Reveal

IndexReveal is a hoverable work index for Framer where each row reveals a cursor-following preview blended in mix-blend difference mode, with a highlight bar sliding behind whichever row is active.

Most cursor-preview list components stop at a floating image that follows the pointer. IndexReveal adds two details none of them do: a difference blend mode that inverts colors where the image crosses text, and a highlight bar that glides to the active row instead of just changing text color.

WHAT IT DOES

Add entries, each with a title, tag, note, and image. Hover any row and a floating image appears, following the cursor with spring physics and clipping in with a rounded reveal instead of a flat fade. The highlight bar slides to match the active row's exact position and height.

KEY FEATURES

• Mix-blend difference layer for a distinctive inverted-color preview

• Spring-based cursor-follow image, adjustable follow tightness

• Animated highlight bar that slides to the active row

• Clip-path reveal/exit animation, not a flat fade or scale

• Adjustable image scale, speed, and row spacing

• Reduced-motion fallback, no cursor tracking or clip animation

• Static-safe rendering shows a clean list on the Framer canvas

• Full color controls, background, highlight, active/inactive text

• Monospace-friendly layout suited to technical portfolios

• Minimal dependencies, built on Framer Motion

WHY IT WORKS

A cursor-following preview is common by now. The difference blend mode and tracking highlight bar give IndexReveal a distinct signature that reads as art direction, not a copied pattern.

PERFECT FOR

Agency client lists, developer portfolios, case study indexes, and any Framer site presenting a browsable list of work with visual previews attached.

WHAT'S INCLUDED

A single drop-in component. Add entries with title, tag, note, and image, then tune speed, follow tightness, and colors through property controls.

Drop it in, load your work, and let visitors hover through it.