Your cursor is another drop: melt into the others. Press and it swells.
Glossy liquid-metal drops that merge when they meet. A single shader works out everything, pixel by pixel: no mesh, no geometry, just a field and the light.
- WebGL
- GLSL
- Metaballs
How it works
Each drop is a field that fades with the square of the distance, and every pixel on screen adds them up. Where the sum crosses 1 there is a surface, and because the fields add, nearby drops melt into each other smoothly.
The surface normal comes from the field's gradient, and that gives a reflection of a computed studio-like environment, tinted with the page's accent colour. The cursor is one more drop that swells while you press. The quality setting changes how many drops there are.
Want something like this on your own site?
Motion and WebGL are part of what I do. We'll work out what fits your site while keeping it fast.
Get an estimate