Fireflies

Little lights wandering on their own paths and glowing on and off.

Summer night

Installation

bash
npx shadcn@latest add https://www.rad-ui.com/r/fireflies.json

React
import Fireflies from "@/components/fx/fireflies"

<Fireflies className="px-8 py-24"><h2>Summer night</h2></Fireflies>

The effect layer is aria-hidden and ignores pointer events; only children are exposed.
The glow fades gently; there is no flashing.
Pauses offscreen; `paused` stops it on demand.
prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) keeps the lights still and steady.

Prop	Type	Default	Description
count	number	26	Number of fireflies.
color	string	'#fde68a'	Glow colour.
seed	number	5	Change for a different, stable swarm.
paused	boolean	false	Stop the animation. It also pauses offscreen.
...props	ComponentProps<'div'>	—	Passed to the root div; children render above.