The Meteors component drops a field of glowing streaks across its container, each one falling at its own pace so the shower never settles into a repeating pattern.
Add it with the CLI, open it in v0, or copy the source into your project.
Adds the component and installs its dependencies for you.
npx shadcn@latest add https://uibeats.com/r/meteors.jsonEverything Meteors accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
| count | number | 20 | How many streaks are in the air at once |
| angle | number | 20 | Direction of travel, in degrees clockwise from straight down |
| duration | number | 3 | Seconds for one streak to cross the frame, before per-streak variation |
| trailLength | number | 90 | Length of a streak's tail in pixels, before variation |
| color | string | #ffffff | Colour of the head and the tail it fades out of |
| className | string | '' | Additional CSS classes for styling |
A quiet shower of light falling behind whatever you put in front of it.