Flow Field Drift
Particles carried through a divergence-free curl-noise field, so the frame never drains into a few basins.
- Category
- Backgrounds
- Added
- 2026-09-21
- Deps
- none
- Updated
- 2026-09-21
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.
Props
"use client";
import { useEffect, useRef } from "react";
/**
* Particles advected through a CURL-NOISE field.
*
* The curl is not a stylistic choice. Sampling a noise field directly as a
* velocity gives a field with sources and sinks, so particles pile up in a few
* basins within seconds and the rest of the canvas empties out. The curl of a
* scalar potential is DIVERGENCE-FREE by construction — incompressible, like a
* real fluid — so density is preserved and the whole frame stays alive.
*/
function hash(ix: number, iy: number, seed: number): number {
let h = seed ^ Math.imul(ix | 0, 0x27d4eb2d) ^ Math.imul(iy | 0, 0x165667b1);
h = Math.imul(h ^ (h >>> 15), 0x2c1b3c6d);
h = Math.imul(h ^ (h >>> 12), 0x297a2d39);
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this background
Flow fields are easy to start and hard to keep alive, and the reason is a single decision most implementations get wrong. Sampling a noise field directly as a velocity gives you a field full of sources and sinks, so within seconds the particles pile into a handful of basins and the rest of the canvas empties out — it looks correct for about ten seconds and then dies. Taking the curl of a scalar potential instead produces a field that is divergence-free by construction, which is to say incompressible in the way a real fluid is, so the flow transports particles without compressing them and the frame stays populated indefinitely. Three supporting details all present as the same symptom. Particles must be respawned on age rather than only when they leave the canvas, because anything caught in a slow eddy never exits and the interior gradually goes static. Their lifetimes must be spread rather than uniform, or they all expire together and the whole field pulses every few seconds. And trails have to be faded with a destination-out composite rather than by painting translucent black over the frame, which converges on black instead of transparency and leaves a permanent grey haze that makes the canvas impossible to composite over anything.
Curator’s note
Sample the noise as a velocity directly and it looks identical for ten seconds, then every particle is stuck in the same three eddies.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Topographic Contour Drift
backgroundsA survey map of terrain that never existed, traced live with marching squares and drifting underfoot.
Caustic Light Pool
backgroundsWater caustics computed from the real focusing condition, so the bright filaments land where the physics puts them.
Noise Gradient Canvas
backgroundsA slow-drifting colored noise wash rendered at low resolution and upscaled smooth.