Flow Field
newThousands of particles riding the curl of a Perlin field — divergence-free, so streams never clump — leaving silky colour trails. The pointer is a vortex every stream bends around.
canvasparticlescurl-noisepointer5 files · 424 locdeps: clsx, tailwind-merge
Installation
With the shadcn CLI, pointing at this platform’s registry:
npx shadcn@latest add https://opusui.131199999.xyz/r/flow-field.jsonOr offline, straight from your opus55 checkout (copies every file it needs):
node ../tailwind_component/opus55/scripts/add.mjs flow-fieldUsage
import { FlowField } from "@/components/opus/backgrounds/flow-field";
<FlowField colors={["#7c5cff", "#22d3ee", "#ff5ea8"]} className="absolute inset-0" />API
| Prop | Type | Default | Description |
|---|---|---|---|
| colors | string[] | — | Gradient sampled by each particle’s heading. |
| count | number | 1800 | Particles (max 6000). |
| scale | number | 1.4 | Noise zoom. |
| trail | number | 0.93 | Trail persistence (0.8–0.995). |
| weight | number | 1.1 | Stroke width (px). |
| interactive | boolean | true | React to the pointer (tracked on window). |
| className | string | — | Wrapper classes — `absolute inset-0` to fill a relative parent. |
| children | ReactNode | — | Optional content rendered above the canvas. |
Notes
- Canvas 2D with a device-pixel-ratio aware backing store (capped at 2×).
- The animation loop stops off-screen and in hidden tabs; resize re-seeds the scene.
prefers-reduced-motion: reducedraws a single static frame.