Skip to content
Something we built for fun

Eight blobs that will not leave each other alone

Move your cursor across it. Eight soft shapes trail after you, and wherever two get close the surface between them necks, stretches and gives way. No images and no libraries, just one triangle and a page of maths, run on the graphics card.

Drag your cursor through it. On a phone, or with reduced motion turned on, it drifts on its own.

How it works

There are no shapes. Nothing here is drawn, moved or resized in the way you would move a box on a page. What exists is a number, worked out separately for every single pixel on the screen, sixty times a second.

Each of the eight blobs contributes to that number, and its contribution falls away with the square of the distance. Close to the centre it is large, further out it fades to almost nothing. Add up all eight contributions and you have a value for that pixel. Then the only decision left is a threshold: below about 1.0 the pixel is background, above it the pixel is liquid.

That threshold is the whole trick. Between two blobs the contributions overlap and add together, so the space between them crosses the threshold before either blob has physically reached the other, which is exactly what a bridge of liquid does. Pull them apart and the bridge thins until the sum drops back below the line and it snaps. Nobody wrote code to make them merge; it falls out of the arithmetic.

The edge is softened over a narrow band rather than a hard cut, and that band is the entire aesthetic. Widen it and the field turns to fog. Narrow it and you get liquid metal.

Why it is fast

Because it is one instruction sent to the graphics card, not a thousand. The page draws a single triangle large enough to cover the screen, and the card runs the same short program on every pixel simultaneously. That is what a GPU is for. There is no scene, no geometry, no object list, nothing to allocate and throw away each frame. The only thing that changes between one frame and the next is eight positions and eight radii: ninety-six numbers.

It stops when you cannot see it, too. Scroll it off screen or switch tabs and the loop parks itself; if your system asks for reduced motion it draws one still frame and never starts.

Why build this?

The same reason as the clock. The things a business actually needs from a website (that it loads quickly, that it works on a phone, that it does not fall over) are almost impossible to show off. This is the same care pointed at something you can watch. It adds no libraries and no build step to the page it sits on.

See what we build for clients