Project Hover List

Project Hover List recreates the classic agency case-study index interaction — the numbered project list where a preview image follows your cursor — as a fully data-driven Framer code component. What it does: - Hovering a row floats a live image preview next to the cursor, spring-smoothed. - Fast cursor movement adds subtle velocity skew to the preview. - Non-hovered rows dim for focus, and each row draws an underline on hover. - Images crossfade when moving between rows. - On mobile/touch, switches automatically to clean inline thumbnails. - Respects prefers-reduced-motion and renders a clean static canvas frame. Fully editable via Property Controls: project list (title, category, image, link per row), font, colors, preview dimensions, radius, and breakpoint. ## How to Use 1. In Framer, create a Code Component and paste the component file. 2. Drag onto the canvas inside a frame with enough height (~90px per row). 3. Open Properties panel and configure your Projects array. 4. Set Font, Text, Accent, and Divider colors to match your site. 5. Adjust Preview dimensions and Radius for corner rounding. 6. Tune Compact Below breakpoint for mobile view. 7. Test in Preview mode — cursor-follow runs in Preview and live. --- ### ⚡ Created by [Spark Studio0](https://www.framer.com/@sparkstudio0/) Explore our full collection of interactive Framer UI components and luxury website templates at [framer.com/@sparkstudio0](https://www.framer.com/@sparkstudio0/). Follow our profile for weekly free UI drops!