Skip to content

component

Index Reveal

By Hamim Reza

Details

Summary

Cursor-follow work list with blend

Description

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.

Introduction

Cursor-follow work list with blend

Rank history

Daily rank per list, from the first snapshot — lower is better.

11001200124129/119/129/139/149/15
  • All · #2343