Interactive Hover FX for Framer

Transform static images into immersive, reactive experiences.
This WebGL-powered Framer component brings cinematic hover interactions inspired by Codrops right into your design workflow, no code required. Whether you're showcasing a product, portfolio, or UI mockup, this effect makes every image feel alive.

What Can You Do with Interactive Hover FX? Real-Time Cursor Distortion

Hover over any image and watch it warp, bulge, scatter, or smear with buttery-smooth precision. Perfect for portfolio thumbnails, banners, and hover previews.

Three Distinct Visual Effects

Choose from three pixel-bending distortion styles:

• Colorful – RGB channel separation for vibrant, layered smears

• Zoom – Fluid magnification that pulls pixels toward the cursor

• Random – Grain-like scatter that adds analog edge and texture

Seamless Image Integration

Simply upload your image or connect to a CMS asset — the component auto-adapts.

Everything is adjustable directly from the Framer property panel:

• Intensity – Controls the power of the hover reaction

• Radius – Define how large the interactive zone is

• Channel Spread / Magnification / Noise Spread – Tailored to each effect

• Corner Radius – Easily match your rounded design style

• Bleed – Expands the interactive zone to push effects outside the image bounds

Responsive & Touch-Friendly

The canvas scales dynamically to any device and respects pixel density.
Optionally disable interactions on smaller screens for optimal mobile UX.

Built for Framer Designers

You don’t need to dive into WebGL, GLSL, or Three.js — it’s all done for you.

Key Features:

• 3 Shader Effects: Colorful, Zoom, Random

• Velocity-Based Motion Tracking

• Fine-Tuned Animation Controls

• Corner Radius & Bleed Area Support

• Fully Responsive & High-DPI Ready

• Auto-disable on Touch Devices (optional tweak)

• Super Lightweight & Fast

A Personal Note from the Creator

I created Interactive Hover FX to bring the raw power of Codrops' shaders into a tool that designers love: Framer. This component is free to use, remix, and evolve — and I can’t wait to see the stunning visuals you build with it.

Need support or want to share feedback?

📧 Email: [email protected]
🌐 Explore More Components: harshworks.framer.website