×

The Swirls, explained

What you're looking at

This isn't a video or a pre-rendered loop — it's a live fluid simulation. Every frame, your graphics card computes how a swirling "ink" moves through the screen. Drag your cursor (or finger) to push the fluid around and inject color; tap to splash a burst.

Who made the library

The simulation is built on Pavel Dobryakov's open-source WebGL-Fluid-Simulation (MIT-licensed), a beautiful GPU implementation of real fluid dynamics. We adapted it as the living backdrop for Clink & Mingle and added the tuning panel you'll find under ⚙ Configure.

The math behind it

It numerically solves the incompressible Navier–Stokes equations — the same equations that describe smoke, water and weather:

∂u/∂t = −(u·∇)u − ∇p + ν∇²u,   ∇·u = 0

Each frame, entirely on the GPU (as fragment shaders), it runs these steps on a grid:

• Advection — the fluid carries its own velocity (and the colored dye) along the flow.
• Vorticity confinement — re-injects the tiny curls that numerical diffusion would smear away; this is what gives the swirls their character (the Swirl slider).
• Pressure projection — solves a Poisson equation with several Jacobi iterations so the field stays divergence-free (∇·u = 0), i.e. truly incompressible.
• Dissipation — velocity and dye slowly fade, which you control as the trail/flow persistence.

Open ⚙ Configure to play with curl, dissipation, splat size, colour palette and more — the simulation updates live.