BlurFocus List – Hover Image Reveal with Cinematic Blur Focus Effect
BlurFocus List is a modern, interactive Framer component that transforms a clean list into a cinematic, focus-driven experience. By default, all items sit in a balanced, minimal layout — but the moment a visitor hovers, that item snaps into sharp focus with a bold image reveal while every other row blurs and fades into the background. The dramatic blur contrast, smooth transitions, and refined motion give your services, categories, or offerings a premium, editorial feel with almost no setup required.
Hover-to-Focus with Blur Effect
Reveals a bold image on hover for the active list item.
All other items blur and fade simultaneously — keeping focus razor sharp.
Smooth opacity and blur transitions feel cinematic and intentional.
Active item stays crisp and vivid to reinforce visual hierarchy.
Supports any number of list items with consistent hover behavior.
Fully responsive and optimized for modern GPU-accelerated performance.
Customizable Design Controls BlurFocus List includes full Framer property controls so you can instantly match it to your brand or layout.
Customize
List Items – Add, remove, or reorder as many items as needed.
Title & Label – Edit item name, category, or supporting text per row.
Image – Assign a unique image to each list item.
Image Size & Position – Control how the image appears within the row.
Blur Intensity – Adjust how strongly inactive items blur on hover.
Inactive Opacity – Fine-tune how faded non-hovered items appear.
Typography – Customize font size, weight, color, and spacing.
Divider Style – Adjust line color, thickness, or remove entirely.
Arrow/Icon – Toggle and restyle the directional indicator per item.
Transition Speed & Easing – Control blur and reveal animation timing.
Active & Inactive Colors – Set distinct styles for hovered vs. idle states.
How It Works BlurFocus List tracks the cursor's hover state across each list item. When a visitor hovers over a row, the component instantly brings that item into sharp focus — revealing its image and lifting its text to full opacity and clarity. Simultaneously, all other rows transition into a blurred, low-opacity state using smooth CSS-based motion, creating a strong visual hierarchy with zero distraction. When the cursor moves away, all items gracefully return to their default balanced state, ready for the next interaction.
Pentaclay
