How to make a fluid cursor effect with WebGL

The technique in three decisions

The solver steps. Each frame runs the same sequence on full screen quads: move the velocity along itself (advection), add the pointer splats, add a little swirl back with vorticity confinement so the motion does not go flat, compute how much the field spreads (divergence), solve for pressure with 20 to 40 iterations, and subtract the pressure gradient so the fluid does not compress. Finally the dye is advected through the corrected velocity and drawn.

Resolution. The velocity field can be coarse, often 128 cells on the short side, because motion is smooth. The dye needs much more, 512 to 1024, because that is what you see. Splitting the two is the biggest single performance decision, and it is why good fluid effects run on laptops at all.

How it sits on the page. Behind a hero, the simulation can draw an opaque background. Over a page, it has to be transparent where there is no ink, so the display shader derives the alpha from the dye's brightness and the canvas blends with premultiplied alpha. Over text, mix-blend-mode: difference on the canvas turns the ink into an inversion of whatever is below.

A minimal version

A real solver is a few hundred lines of shaders, so it does not fit in a snippet. What fits is the cheap approximation below, a 2D canvas that fakes the look: colour is stamped along the pointer path, and every frame the canvas is redrawn slightly enlarged and faded, which makes the ink spread and dissolve. It is also a reasonable fallback for devices without float textures.

const canvas = document.querySelector("canvas.ink");
const ctx = canvas.getContext("2d");
let w = 0, h = 0, last = null;

function resize() {
  const dpr = Math.min(devicePixelRatio, 2);
  canvas.width = (w = innerWidth) * dpr;
  canvas.height = (h = innerHeight) * dpr;
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
}
resize();
addEventListener("resize", resize);

addEventListener("pointermove", (e) => {
  const speed = last ? Math.hypot(e.clientX - last.x, e.clientY - last.y) : 0;
  last = { x: e.clientX, y: e.clientY };
  const r = 24 + Math.min(speed, 90);
  const hue = (performance.now() / 15) % 360;
  const g = ctx.createRadialGradient(last.x, last.y, 0, last.x, last.y, r);
  g.addColorStop(0, `hsla(${hue}, 90%, 60%, 0.45)`);
  g.addColorStop(1, `hsla(${hue}, 90%, 60%, 0)`);
  ctx.fillStyle = g;
  ctx.fillRect(last.x - r, last.y - r, r * 2, r * 2);
});

(function frame() {
  ctx.globalCompositeOperation = "copy";
  ctx.drawImage(canvas, -2, -2, w + 4, h + 4);
  ctx.globalCompositeOperation = "destination-out";
  ctx.fillStyle = "rgba(0, 0, 0, 0.035)";
  ctx.fillRect(0, 0, w, h);
  ctx.globalCompositeOperation = "source-over";
  requestAnimationFrame(frame);
})();

Give the canvas position: fixed, inset: 0 and pointer-events: none so it covers the page without blocking clicks; the listeners sit on the window for the same reason.

Where it gets hard

Float textures. The solver needs render targets that store fractional values. WebGL2 supports half float targets on most devices, but WebGL1 and some mobile GPUs do not, or cannot filter them linearly. Robust implementations probe for support at start up, fall back to a lower precision format, and do bilinear filtering by hand in the shader when the hardware cannot.

Pointer input. Splats must carry the pointer's velocity, not just its position, or the fluid does not move with the hand. Measure the delta between events, scale it by the screen size, and on touch screens handle several pointers at once. Listen on the window with pointer-events: none on the canvas, or the effect will swallow every click on the page.

Device pixel ratio. Rendering the dye at the full ratio of a high density screen quadruples the cost for little visible gain. Cap it at 1 or 1.5 for the simulation and let the browser scale the canvas up.

Idle and hidden. A simulation that keeps running after the ink has faded burns battery for nothing. Stop the loop after a few seconds without input, restart it on the next move, and pause when the tab is hidden.

Accessibility. The effect is decoration: mark the canvas aria-hidden="true", turn it off for prefers-reduced-motion, and make sure text under the ink keeps enough contrast at every moment.

Performance

The pressure iterations dominate the cost. Lowering them from 40 to 20 is usually invisible; lowering the velocity resolution is the next lever. On phones, either run a reduced version or fall back to something like the canvas snippet above, and measure on a mid range Android device rather than a recent iPhone.