MeteorShower

Occasional streaks of light falling across the background.

Make a wish

Installation

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

React
import MeteorShower from "@/components/fx/meteor-shower"

<MeteorShower className="px-8 py-28"><h2>Make a wish</h2></MeteorShower>

Meteors are aria-hidden and ignore pointer events.
Pauses offscreen; `paused` stops it on demand.
prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) removes the meteors rather than freezing them mid-flight.

Prop	Type	Default	Description
count	number	12	Number of meteors.
color	string	'#cbd5e1'	Meteor colour.
seed	number	3	Change for a different, stable pattern.
paused	boolean	false	Stop the animation. It also pauses itself offscreen.
...props	ComponentProps<'div'>	—	Passed to the root div; children render above the effect.