Nocturne Baths, Fluid Splash Cursor
What it does
A GPU fluid simulation that lives on top of a whole page instead of behind a hero. Pointer movement injects a force and a puff of dye into double-buffered half-float render targets, and a Navier-Stokes solver — curl, vorticity confinement, divergence, 20 Jacobi pressure passes, semi-Lagrangian advection — makes the ink swirl and dissipate. The display pass derives alpha from the dye's own brightness and blends premultiplied, so unpainted water is fully transparent and the document underneath is untouched. No library: raw WebGL2 with a WebGL1 fallback and per-format probing. Hue cycles by default or holds one brand colour; the loop caps device pixel ratio, stops itself after four idle seconds and restarts on the next movement.
How it's built
| Category | 3d-webgl |
|---|---|
| Tech | vanilla JS |
| Complexity | page |
| Performance cost | heavy |
| Mobile-safe | yes |
Rebuild it with AI
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# Fluid Splash Cursor (page-level GPU Navier–Stokes overlay)
## Goal
Build a page whose pointer drags **liquid ink across the entire document** — not inside a hero box, not behind the content, but on a transparent full-window layer that composites over headlines, tables, borders and photographs alike. Moving the pointer pushes a force and a puff of dye into a fluid simulation running on the GPU; the ink curls, spreads and dissipates on its own. Clicking bursts. The page underneath is never touched: no blend mode inverts it, no canvas covers it, no listener steals its clicks.
The demo dress is **Nocturne Baths № 4**, a municipal swimming pool that only opens after dark.
## Tech
**Vanilla HTML/CSS/JS. No library at all** — not GSAP, not three.js, not a shader loader. Raw WebGL2 with a WebGL1 fallback, one `requestAnimationFrame` loop, ES module syntax so it drops into a bundler or a plain `<script type="module">` unchanged. The whole solver is one exported function:
```js
const fluid = splashCursor({ curl: 12, densityDissipation: 3, color: "#ff0000" });
```
If you are tempted to reach for three.js: don't. The entire GPU side is ten fragment shaders and a fullscreen quad — copy, clear, splat, advection, divergence, curl, vorticity, pressure, gradient-subtract and display — and pulling in a scene graph to draw a quad triples the bundle for nothing.
## The mechanic
### What a fluid solver actually is here
…Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in
Learn the technique
New components in your inbox
One email a week, only when new components ship, each with its live demo and prompt.