Fluid Background
The soft blobs drifting behind every page on this site aren't a video or a pre-rendered loop — they're a real-time fluid simulation I wrote from scratch. It runs on the GPU with WebGL (via Three.js and React Three Fiber), stepping a fluid solver a few dozen times a second and rendering the result as a smooth metaball iso-surface in the site's paper-beige palette.
Most modes use a grid-based, stable-fluids–style solver — advecting a velocity field and a dye field, with pressure projection to keep the flow incompressible. One mode swaps that out for a smoothed-particle (SPH) liquid that sloshes and settles like water in a tank. There are a handful of personalities to choose from:
- Letter "Z" — dye gathers into a softly breathing Z (the default).
- Curl flow — a curl-noise flow field carries the dye in lazy swirls.
- Liquid (SPH) — a smoothed-particle fluid sloshes, splashes, and settles.
- Ink — thick, viscous billows drift slowly.
- Drip — heavy blobs detach and fall, lava-lamp style.
- Flocking — a flock of boids stirs the fluid as it swarms.
You can switch modes (or turn the animation off entirely) with the ✦ control floating in the top-right corner — go give it a try; the background you're looking at right now will change.