Lava Buster Fluid Simulation

How it works

A full-screen background that looks like molten rock in motion. Glowing orange filaments pour out of the centre of a black screen, swirl outwards and curl back on themselves like hot fluid. The fountain sweeps slowly round on its own, so the pattern never repeats. Move the mouse and the flow reacts; hold the button down and a spinning vortex opens under the cursor and drags the lava into a whirl.

There is no animation library and no image. Three.js is used only to run a chain of custom shaders on the GPU, and everything you see is the result of a particle simulation computed every frame.

Particles that live in a texture

The simulation stores one particle per pixel of a large floating-point texture: each pixel remembers a position and a velocity. Every frame, a shader moves each particle by its velocity, slows it slightly, and pushes it along the local pressure of the fluid. Particles that drift out of their cell are handed over to neighbouring cells by checking which nearby particle has landed closest, so the population flows across the grid instead of staying put, and empty cells respawn a particle so the field never thins out.

Two forces feed energy into the system. A permanent emitter at the centre of the screen adds velocity in a direction that rotates slowly over time, which is why the fountain sweeps. When the mouse button is held, the particles near the cursor are blended towards a spinning velocity, which opens the vortex.

A field that gives it weight

A second set of shaders turns the particles into a continuous field. Each pass spreads the particles' density and velocity onto the grid, measures where the flow is diverging, and diffuses a pressure value across neighbouring cells, a light wave-like propagation that the particle pass reads back on the next frame. That feedback is what makes the streams push on each other and curl, rather than flying out in straight lines.

Like any GPU simulation, it uses pairs of render targets and swaps them every frame, so each pass reads last frame's state while writing the new one.

Where the glow comes from

The final shader does not draw the particles at all. It measures how much the velocity field is rotating at each point, its curl, and paints that as orange on black. Calm areas stay dark and the hottest light lands exactly where the flow twists hardest, which is what gives the image its incandescent filaments.

Performance and mobile

This is one of the heaviest components in the library: several full-screen floating-point passes per frame, at a resolution higher than the CSS size of the screen. It needs float render target support and a capable GPU, so it belongs on desktop only. For production, run the simulation at a lower resolution, pause it when it leaves the viewport and show a still frame on phones and under reduced motion.