Flow Field
Particles streaming along an evolving noise vector field, leaving silky fading trails.
Hundreds of particles ride an invisible, slowly-evolving current, leaving silky
trails that fade behind them — generative, organic, hypnotic. It paints its own
themed background, so drop it as the first child of a relative container and
let your content sit above it.
Generative by default
Currents you never see twice.
Installation
pnpm dlx shadcn@latest add "https://godui.design/r/flow-field.json"Usage
import { FlowField } from "@/components/godui/flow-field";
<div className="relative overflow-hidden">
<FlowField />
<YourContent />
</div>The layer is absolute inset-0 z-base; parent must be relative, content at
z-raised+. It paints its own background from --color-background and draws
trails in color (default --color-primary); both track light/dark. Caps DPR at
2, pauses off-screen and on hidden tabs, and renders a frozen still under
prefers-reduced-motion.
Examples
Long trails
Lower fade for longer, silkier streaks.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
particleCount | number | 900 | Number of particles (auto-scaled to area). |
noiseScale | number | 0.0016 | Field scale — smaller is broader/smoother. |
speed | number | 1 | Flow speed multiplier. |
color | string | --color-primary | Trail color. |
fade | number | 0.06 | Trail fade per frame, 0–1 (lower = longer trails). |
Also accepts standard div attributes (e.g. className, style).