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.
Behind a hero, a pricing panel or an empty state that reads as flat on its own, anywhere you want depth without a picture to load. It is at its best on a dark surface, where the heads have something to glow against; over a light background the streaks wash out and a higher `count` only makes the frame look dusty. Keep the count modest behind text: every streak is an animated element, and forty of them competing with a paragraph costs legibility as well as frames. Nothing moves at all under `prefers-reduced-motion`.
Add it with the CLI, open it in v0, or copy the source into your project.
Everything 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.