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.
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.
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.
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.
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.
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.
J S
