Water Ripple Effect uses WebGL shaders to treat any image as the surface of a pool: moving the mouse drops ripples that refract and distort the image beneath, with waves that spread, overlap, and settle. Wave amplitude, damping, and background image are props. Built with React and Tailwind CSS. Effective for immersive hero backgrounds, image galleries that reward exploration, and section dividers with a physical feel.
Installation
Usage
import WaterRippleEffect from "@/components/ui/water-ripple-effect";// Basic usage with default settings
<WaterRippleEffect
imageSrc="/path/to/your/image.jpg"
width={400}
height={400}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
imageSrc | string | Required | Source URL or path to the image that will have the water ripple effect |
width | number | 920 | Width of the canvas in pixels |
height | number | 955 | Height of the canvas in pixels |
waveIntensity | number | 0.006 | Intensity of the global wave distortion (0-1) |
rippleIntensity | number | 0.012 | Intensity of the mouse-triggered ripple effects (0-1) |
animationSpeed | number | 1.0 | Speed multiplier for all animations (0.1-5.0) |
hoverRippleMultiplier | number | 4.0 | Multiplier for ripple intensity when hovering (1-10) |
transitionSpeed | number | 0.08 | Speed of transitions between hover states (0.01-0.5) |
waveFrequency | number | 10.0 | Frequency of the global wave patterns (1-50) |
rippleFrequency | number | 20.0 | Frequency of the mouse-triggered ripples (5-100) |
distortionAmount | number | 0.008 | Amount of directional distortion applied to the image (0-0.1) |
scale | number | 1.0 | Scale factor for the entire component (0.1-2.0) |
className | string | "" | Additional CSS classes to apply to the canvas container |
containerClassName | string | "" | Additional CSS classes to apply to the outer container |
onHover | () => void | Optional | Callback function triggered when mouse enters the component |
onLeave | () => void | Optional | Callback function triggered when mouse leaves the component |