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.
- Category
- Backgrounds
- Added
- 2026-09-25
- Deps
- none
- Updated
- 2026-09-25
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Ink in water, on the GPU.
128 × 20 JacobiProps
"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
// ---------------------------------------------------------------
}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.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Prism Beam Hero
heroesA raymarched glass prism on black: a white beam comes in from wherever your pointer is, a spectrum fans out the other side, and the prism turns once a minute. One shader, no libraries.
Liquid Wallpaper Field
backgroundsA slow WebGL wallpaper of folded silk layers on a seamless 60-second loop: vivid, calm, and sharp-edged enough for glass to bend.
Pointer Warp Dot Field
backgroundsA canvas dot grid that bulges and brightens away from the cursor.