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.

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.

Interactive WebGL Image Effect