Image Ripple Effect
Add stunning, touch-friendly ripple hover effects to your images with this Framer component — smooth, modern, mobile-ready, and easy to use.
Make it with Workshop
Build your own component with AI
Add stunning, touch-friendly ripple hover effects to your images with this Framer component — smooth, modern, mobile-ready, and easy to use.
Make it with Workshop
Build your own component with AI
Transform any image into a living water scene with crisp, responsive ripples—built for mouse, touch, and pen. Enjoy smooth performance on mobile and broad WebGL1 compatibility. Accurate cover mapping keeps your visuals on-brand (no stretching or cropping), while adaptive timing delivers silky motion across devices. Perfect for hero banners, product imagery, and interactive sections that captivate and convert.
Realistic, responsive ripple simulation
Pointer Events support (mouse/touch/pen)
Mobile-friendly with smart DPR capping
WebGL1-ready for older GPUs
Adaptive timing for steady animation
Accurate cover UV mapping
Image: choose the source/alt for your visual.
Ripple Strength: overall intensity of the effect.
Ripple Speed: how fast waves evolve.
Ripple Density: frequency/complexity of ripples.
Liquid Line Density: adds subtle flowing patterns.
Distortion Strength: push/pull of pixels around interaction.
Distortion Radius: area of influence.
Distortion Falloff: how quickly the effect fades outward.
Mouse Offset: slight drift following the pointer for depth.
Effect Width / Height: limit the active region (per-axis).
Dampening: controls trail fade-out and persistence.
Quality (DPR cap): balance clarity vs. speed on high-DPI screens.
Max Trail: adjust trail length for stability and style.
Make imagery feel alive—without heavy assets or video. Plug in, tweak, and ship experiences that stand out.
