What it looks like
It is like looking at a photo at the bottom of a shallow pool. The cursor leaves a trail of small waves that spread in rings, cross each other and slowly lose strength; a click makes a much bigger ripple, like a stone dropping in. Random drops fall at short intervals, like light rain, and keep the surface alive. Where the water curves, the image underneath shifts, and bright glints appear on the crests, like sunlight on water. Any content you place inside the component sits on top, undistorted.
You may be looking for this if you asked for something like
- a photo with a water effect that ripples when I move the mouse
- a pool-like background that makes waves under the cursor
- an image that wobbles like water when I click
- a spa website hero with a real water effect
- a water drop effect on top of a photo
- a beach hotel hero with interactive little waves
Also known as
- water ripple
- ripple effect
- water simulation
- water surface effect
- WebGL water
- interactive ripples
When to use
- A travel, resort, inn or water park hero
- A spa, aesthetic clinic or wellness brand tied to water
- A campaign opener for a drink, cosmetic or water-themed product
- A short section with a strong photo and little text on top
When to avoid
- Pages that already run another heavy WebGL effect; the prompt allows one per page
- Browsers without WebGL2, which show no image unless there is a static fallback
- Long reading areas, where the constant rain distracts
How to ask your AI
Create a WebGL2 water ripple effect over the hero photo: the cursor leaves a trail of waves, clicks make bigger ones and the image refracts with glints on the crests. I want the rain off and still water for reduced motion, rendering paused off screen and a fallback image without WebGL2.
With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising.
Questions about Water Ripple
Does Water Ripple work on phones?
Water Ripple works on devices with WebGL2. On phones, each tap on the image creates a large ripple, and the automatic raindrops keep the water moving without any gesture. Because it is rated Heavy in THM Componentes, the prompt tells your AI to load it on demand, keep to one heavy WebGL effect per page and provide a static fallback.
Does Water Ripple respect reduced motion settings?
Yes. With reduced motion turned on, Water Ripple turns off the rain and stops propagating waves. The cursor and taps still leave marks that bend the image, but they stay still instead of spreading. Off screen, the component stops drawing, which spares the graphics card.
Can I control the strength and length of the waves in Water Ripple?
Yes. Water Ripple has props for the radius of each drop, the wave height, the damping, which sets how long the waves last, and the strength of the image distortion. The automatic rain can be turned off by setting the rain prop to false, leaving the waves to the cursor and clicks.
