Thousands of particles follow a slowly shifting vector field and leave fading trails, tinted from one color to another by their heading. The pointer stirs a local eddy into the current.
Live wind from 4,200 stations
npx shadcn@latest add https://hyperblur.dev/r/bg-flow-field.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-flow-field.tsx.
import { BgFlowField } from "@/components/hyperblur/bg-flow-field"
<div className="relative h-96"><BgFlowField><h1>Live wind data</h1></BgFlowField></div>| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#2f7bff" | Trail color for particles heading one way. Hex color. |
| accent | string | "#5ff0d2" | Trail color for particles heading the other way. Hex color. |
| background | string | "#06070b" | Color the trails fade into. Hex color. |
| density | number | 1 | Particle density relative to the container area. |
| trail | number | 0.9 | Trail length from 0 (short) to 1 (longest). |
| scale | number | 1 | Size of the swirls in the field. Higher means wider, calmer curves. |
| speed | number | 1 | Particle speed and field evolution speed. |
| className | string | "" | Extra classes for the root. The root is absolutely positioned and fills its parent. |
| children | ReactNode | Content rendered on top of the background. |