Water Ripple Image Hover Effect with Canvas
Overview
A photo card for React and Next.js that behaves like water. Dragging the cursor leaves a wake, clicks make big rings, and the picture and its title bend with the surface, using plain canvas and no WebGL.
A heavy drop falls onto dark water, throws up a crown of droplets, and the picture is uncovered by the rings as they spread. Drops keep falling at random after that, and a slow wake crosses the picture until a cursor arrives, so it never looks frozen. Dragging across the card leaves a wake behind the cursor, and a click makes rings big enough to reach the edges and bounce back.
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 114 / Cards
Shattering Glass Image Animation with Canvas
On Load · On Click · Mouse Move
No. 105 / Cards
Jelly Image Card Soft Body Physics with Canvas
On Load · Mouse Move · Drag · On Click
No. 099 / Hero
Dot Portrait Hero with Particle Image Canvas Animation
On Load · Mouse Move · On Click
(02)FAQ
Water Ripple Image Hover Effect with Canvas — FAQ
01What can I change?
Pass image and alt, overlayText for the big title and overlayKicker for the small line above it. Use focus to choose the crop, as x and y from 0 to 1. The size comes from the width you give it, and the card keeps a 4 by 5 shape.
02Why is the title drawn on the canvas?
So the water bends it along with the photo. It is also in the page as real text for screen readers. Put anything people must be able to read at all times, such as a price, outside the card.
03Does it work without a mouse?
The Drop a stone button drops one on the middle of the picture, and focusing the button starts small rings in the centre. On a phone, a tap makes rings, a sideways drag leaves a wake, and a vertical swipe scrolls the page.
04What does it need from my page?
npm install gsap @gsap/react, and Tailwind CSS v4. Pass a font-family to serif, usually a CSS variable with a fallback. The photo must be same origin or served with CORS headers, because the pixels are read back once.
05What happens with reduced motion?
The photo and title show as a still with no running loop. The button still answers, by drawing frozen rings on the water, and a second press flattens it again.