Hover Image Reveal is a premium, interactive Framer component designed to add an engaging layer of discovery to your website. By tracking the user's cursor with smooth, physics-based motion, it acts like a digital flashlight, gracefully uncovering hidden images, textures, or hand-drawn illustrations beneath your main content. It transforms static web pages into memorable, tactile experiences that encourage visitors to explore every inch of your site.
Key Features
Fluid Physics: Powered by Framer Motion, the reveal effect follows the cursor with a natural, spring-loaded trailing motion that feels buttery smooth and premium.
Total Customization: Easily adjust the mask radius, edge softness, and background colors directly from the Framer properties panel. Create anything from a sharp, focused beam to a soft, ambient glow in seconds.
Advanced Blend Modes: Seamlessly integrate your hidden layers with your site's overall aesthetic using native CSS blend modes like Multiply, Screen, Lighten, and Overlay.
Responsive and Smart: Automatically disables the cursor-tracking effect in the Framer canvas so it doesn't distract you while designing, while performing perfectly on the published site.
Plug-and-Play Setup: No code required. Simply drop the component onto your canvas, set it to fill your section, upload your desired image, and you are ready to go.
Perfect For
Creative Portfolios: Reveal behind-the-scenes wireframes, hand-drawn sketches, or vibrant gradients as users hover over your case studies.
Interactive Storytelling: Create immersive, narrative-driven landing pages that reward users for exploring the screen with their mouse.
Teaser Campaigns: Hide upcoming product shots, easter eggs, or secret announcements in the dark, turning your website into an interactive game of discovery.
Rabyaan Khan
