About ImageRevealPro
The ImageReveal Pro is a visually striking Framer component that turns static images into immersive, interactive experiences. On hover or in auto mode, a dynamic spotlight smoothly reveals the image, while the surrounding area stays dark and blurred. A soft glow and subtle ring effect enhance depth and visual focus, creating a cinematic, premium feel. Perfect for portfolios, hero sections, product showcases, and storytelling layouts, this component delivers high-end interactivity with minimal setup.
Interactive Spotlight Effects
Dynamic radial reveal that follows cursor movement for an engaging, attention-guiding effect.
Cinematic foreground blur keeps unrevealed areas dark, directing focus naturally.
Glow aura and ring that subtly highlights the revealed area, enhancing depth.
Auto animation mode for passive storytelling or continuous motion on landing pages.
Smooth physics-based animation using requestAnimationFrame for seamless performance.
Customizable Design Controls
The ImageReveal Pro includes full Framer property controls, letting you tailor it to your brand or style. Customize:
Image – Upload any photo or graphic to be revealed.
Glow colors – Set primary and secondary glow hues for visual accent.
Blur intensity – Control how dark or diffused the foreground appears.
Reveal size – Adjust the spotlight radius.
Softness – Define how gradual the reveal fades.
Speed – Control how quickly the spotlight follows the cursor.
Trigger mode – Choose between hover interaction or automatic loop.
How It Works
The component tracks the cursor position (or auto loop) to calculate the reveal center. A radial gradient mask hides the unrevealed portion, while the foreground remains dark and blurred. The glow and ring dynamically update to follow the spotlight, producing a realistic cinematic effect. On cursor leave, the reveal fades smoothly back to a neutral, fully dark state.
Perfect For
Portfolio hero sections
Product image showcases
Case study or storytelling layouts
Interactive landing pages.
