Flow Field Glow Backdrop

ProNew

Glowing particles that ride an invisible current and leave soft trails behind; optionally, the pointer stirs the flow.

The full demo as documented.

Customize

Controls declared by this item. Changes drive the preview live.

speed1


pnpm dlx shadcn@latest add @tealmac-pro/backdrop-flow-field-glow

Prop	Type	Default	Description
`colors`	`string[]`	`chart-1, chart-2, chart-3`	CSS colors drawn from in order. Any CSS color or `var()`.
`speed`	`number`	`1`	Playback speed multiplier.
`density`	`number`	`1`	How many elements to draw. Higher is busier.
`pointer`	`boolean`	`false`	Let the pointer over the parent element steer the effect (opt-in).

Also accepts all <div> props except children.

Decorative: the wrapper is aria-hidden and pointer-events-none, so it never takes focus or blocks clicks.
Under prefers-reduced-motion: reduce it draws one still frame and does not animate.
Pointer steering is opt-in through the pointer prop; nothing depends on it.

Trails come from fading the canvas a little every frame. The pointer is optional and only swirls nearby particles.
Fills its nearest positioned parent (absolute inset-0). Put page content above it with relative isolate on the parent and -z-10 on the backdrop.
Draws with the 2D canvas only (no WebGL, no extra packages), caps the pixel ratio, and stops its loop while off-screen or in a hidden tab.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/backdrop-flow-field-glow

Prop	Type	Default	Description
`colors`	`string[]`	`chart-1, chart-2, chart-3`	CSS colors drawn from in order. Any CSS color or `var()`.
`speed`	`number`	`1`	Playback speed multiplier.
`density`	`number`	`1`	How many elements to draw. Higher is busier.
`pointer`	`boolean`	`false`	Let the pointer over the parent element steer the effect (opt-in).

Also accepts all <div> props except children.

Decorative: the wrapper is aria-hidden and pointer-events-none, so it never takes focus or blocks clicks.
Under prefers-reduced-motion: reduce it draws one still frame and does not animate.
Pointer steering is opt-in through the pointer prop; nothing depends on it.

Trails come from fading the canvas a little every frame. The pointer is optional and only swirls nearby particles.
Fills its nearest positioned parent (absolute inset-0). Put page content above it with relative isolate on the parent and -z-10 on the backdrop.
Draws with the 2D canvas only (no WebGL, no extra packages), caps the pixel ratio, and stops its loop while off-screen or in a hidden tab.