Meteors
Free
Diagonal meteor streaks with glowing heads, launched at random intervals over a faint starry sky.
Make a wish
Customize
10
35°
1
#ffa585
Installation
npx shadcn@latest add https://ui.mekaigames.com/r/meteors.jsonWorks in any project set up with the shadcn CLI.
Install the dependency.
npm install motion- Copy the code from the Code tab into
components/ui/meteors.tsx.
Usage
import { Meteors } from "@/components/ui/meteors";
<section className="relative h-[600px] bg-ink-950">
<Meteors count={10} angle={35} />
</section>Props
6 properties| Property | Type | Default | Description |
|---|---|---|---|
| count | number | 10 | Meteors that can be in the sky at once. |
| color | string | "#ffa585" | Meteor color as a hex value. |
| angle | number | 35 | Fall angle in degrees from vertical. Positive values slant to the left, negative to the right. |
| speed | number | 1 | Fall speed multiplier. |
| stars | boolean | true | Draw a few faint, twinkling stars behind the meteors. |
| className | string | — | Extra classes for the canvas. It fills its nearest positioned parent. |
Dependencies: motion