Mesh Image Hover

Bring Your Framer Portfolio to Life with Immersive WebGL Interactions

Mesh Image Hover is a lightweight, high-performance React component built for Framer using Three.js. It transforms ordinary static images into mesmerizing, interactive fluid-distortion canvases that react dynamically to cursor movement.

🚀 Key Features

• Fluid Distortion Physics: Real-time ripple and wave mechanics driven by your mouse cursor's velocity and direction.

• RGB Color Splitting (Chromatic Aberration): Toggleable chromatic shift that fragments colors during fast movements for a hyper-modern, glitch-art aesthetic.

• Fully Responsive: Automatically adapts to any layout dimension (fixed or fluid sizing) via a built-in ResizeObserver.

• Native Framer Controls: Easily customize properties directly from the right-hand Framer sidebar without touching code.

🎛 Customizable Properties

• Image Layer: Upload or pick any high-res image directly via Framer’s asset picker.

• Hover Radius: Adjust the catchment size of the distortion wave.

• Distortion Strength: Control the intensity of the ripple effect.

• Color Split (On/Off & Intensity): Fine-tune the RGB channel splitting effect.

• Fluid Decay: Adjust how quickly the fluid simulation settles back to normal.

• Corner Radius: Style the outer borders seamlessly to match your design system.

Perfect for creative portfolios, design agencies, and showcase websites looking to add that extra layer of polish and delight.