liquid ripple
A free animation — play it in your browser, no install. Zero-dependency WebGL water background — ambient swell, caustics and pointer-spawned ripple rings in one fragment shader. Vanilla JS + React.
Vote and save it — continue with GitHub or sign in free
Made this, @AsimRauf? See how many people played it → or use email
GitHub asks to share your profile and email with us. We never post anything.
No account needed to save ♥ or react 🔥: they’re under the game. Or vote with email.
Open the live demo Source on GitHubFrom the README
A water background that reacts to the pointer. Ambient swell, caustic shimmer, and ripple rings that spread and fade where you move — drawn by one WebGL fragment shader, in about 6 KB of TypeScript with zero dependencies.
Live demo and full docs → axistify.com/open-source/liquid-ripple
catch a specular highlight, because the shader builds a height field and differentiates it into surface normals.
fallback shows through. Same for browsers without WebGL.
work in hidden tabs, ~1 KB of state.
The canvas fills its nearest positioned ancestor by default.
Built something like this? Submit your vibe — free account, takes a minute. How listing works.
More like this
revealed
Paint one image out of another. A wet-edge WebGL image reveal for React and plain JS, with no runtime dependencies.
shaderflow
Visual node-based GLSL shader editor - design materials on a graph, compiled live to WebGL. React + React Flow + Three.js.
- fluid wallpaper Living generative ink for the web — WebGL2 fluid as a web component or React embed.
fluid
Dependency-free WebGL studio for generative backgrounds and live embeds.
brc background
Reverse-engineered reconstruction of the Bomb Rush Cyberfunk menu background: an iterated sine/cosine domain-warp WebGL shader, plus a React…
singularity
An animated WebGL black hole for your website. Tune it in the playground, then copy HTML, React, self-contained code or an AI agent prompt. Zero…
Made this?
Claim it: create a free account, then press CLAIM THIS in the cruiser. Put the badge below in your README or on your demo page first; that link is how we know it's yours.
Your project is on the cruise, loaded live from your own site. Put the badge in your README or on the demo page: it shows your live play count, it links back to this page, and everyone who lands here is one click from running the real thing.
