Ink Fluid Field
A real Navier–Stokes fluid simulation on the GPU: your pointer drags luminous ink through dark water, and slow currents keep it alive when nobody is touching it.
WebGL20 deps1 file · 25 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useRef } from "react";
/**
* InkFluidField — a real fluid simulation on the GPU. Your pointer drags
* luminous ink through dark water.
*
* This is the Navier–Stokes solver behind the "smoke follows the cursor"
* backgrounds on award sites, in one file with no dependencies. Every frame:
* advect the velocity field by itself, add the curl-driven vorticity that
* keeps the swirls alive, solve pressure with twenty Jacobi passes and subtract
* its gradient so the fluid stays incompressible, then advect the ink through
* the result. The simulation runs at a low resolution (128 cells tall) and the
* ink at a higher one, so it is cheap on a laptop and still looks like liquid.
*
* ONE COLOUR OF INK. The dye is a single tint on black, and dense ink burns
* toward white at the core, the way real ink catches light. That keeps it a
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this background
The background where smoke follows the cursor is the most copied effect on award-winning sites, and nearly every component library approximates it with blurred circles that trail the pointer. This is the real thing: an incompressible fluid solver running on the GPU in WebGL2. Each frame the velocity field is advected by itself, a curl-driven vorticity term keeps the swirls alive instead of letting them smear out, twenty Jacobi passes solve for pressure and its gradient is subtracted so the fluid never compresses, and the ink is carried through the result. The simulation runs on a coarse grid and the ink on a fine one, which is why it stays cheap on a laptop and still moves like liquid. The ink is one colour on black, burning toward white where it is densest, so it remains a background rather than a rainbow. Two slow currents wander the tank on a forty-second circuit, so the field breathes before anyone touches it, and a drag of the pointer is the real event. It falls back to a still wash without float textures or under reduced motion, pauses off-screen, and survives a lost context.
Curator’s note
The cursor-smoke background is the one effect every studio site has and every component library fakes with blurred divs. This is the actual solver, in one file, with no dependencies.
