Move the pointer across it. Click to drop.
Water Ripple
A real wave simulation on the GPU. Ripples follow the pointer, cross and interfere.
If the demo runs in your browser, the effect will too.
Or get every effect in the library for $99- Made with
- WebGL
- Size
- 11.9 KB gzipped, no dependencies
- Works in
- HTML, React, Elementor, Claude skill
- Without support
- Where WebGL is unavailable it becomes a CSS gradient in your own colours.
Installing it
Download
After paying you get a ZIP. Unzip it; the folder is the whole effect.
Put it in your project
Drop the folder into your project and tell your AI assistant “Install this Unbland effect in my project.” No assistant? Paste the HTML version into Elementor’s HTML widget, or add one script tag to your page.
What you can change
- colorDeep · colorShallow · colorGlow
- The pool's depth, its lit floor and the shimmer — usually your brand accent.
- damping
- How long ripples last, from a quick fade to very persistent.
- rippleSize
- From a tight droplet to a broad swell.
- autoDrops
- Gentle rain on its own. Off by default, so text on top stays readable.
Every option is listed in the package, in plain words.
Requirements and testing
Any browser with WebGL — every current desktop and mobile browser.
Driven end to end in Chrome on macOS, in Elementor on a live site, in React and Next.js, and in Safari on an iPhone 13 Pro. Lovable and Framer are expected to work but were not tested live.
Questions
Will it fight the text I put on top?
No. It makes one ripple on arrival and then waits for the visitor, so a heading over it stays still and readable.
How do I know it will work on my site?
The demo on this page is the effect itself, running in your browser. If it runs here, it will run on your site in the same browser.
Can I use it on a client's website?
Yes. A single purchase covers up to three projects, and a client's site counts as one of them. The client keeps theirs for good.
Something isn't working after I bought it. What now?
Write to us first at hello@unbland.dev — say which browser and device, with a link or a screenshot. Most problems are solved in one reply. If the effect itself can't be made to work for you, you get your money back.
What do I get after paying?
A download link straight away, with a ZIP containing the effect, its instructions for AI assistants, and a plain-language readme.
