Bring your designs to life with the interactive “Water Ripple” effect. This component transforms any static image into a dynamic, touch-responsive water surface. It's lightweight, highly customizable, and perfect for adding a memorable touch of magic to your website. Adjust the parameters for glitchy and psychedelic effects for your image.
Perfect for hero sections, background images, product showcases, or any element you want to make truly interactive.
Realistic Water Physics – A dynamic ripple simulation that reacts beautifully to cursor movement, clicks, and taps.
Interactive Hover & Click – Generate ripples by simply hovering over the component or create a bigger splash with a click.
Customizable Ripple Effects – Independently control the size and strength of ripples for both hover and click events.
Create glitchy effects - Create glitchy & psychedelic effects by adjusting the parameters.
Click to Ripple - Option to disable hovering to ripple entirely and click to ripple for a surprise effect.
Adjustable Damping – Fine-tune how quickly ripples fade out, from a quick splash to long-lasting waves.
Optional Hover Trail – A subtle, glowing trail can follow the cursor for added visual flair, which can be toggled on or off.
Use Any Image – Apply the water effect to any image you choose, making it incredibly versatile.
Lightweight & Performant – Optimized for smooth, high-frame-rate animations that don't slow down your site.
Fully Responsive – The effect seamlessly adapts to any component size and shape.
Image – Upload any image to serve as the water's surface.
Hover Effect – A master switch to enable or disable all hover-related ripples and trails.
Hover Ripple Radius – Control the size of the ripple generated by mouse movement.
Click to Ripple – Toggle the click/tap ripple effect on or off.
Click Ripple Radius & Strength – Customize the size and intensity of the splash on a click or tap.
Damping – Set how quickly ripples fade away using a simple slider.
Frame Rate – Adjust the animation's FPS for performance tuning.
Border Radius – Easily match the component's corner radius to your design.
