Back
Meteors
Satu Visual ComponentNew
A shower of meteors streaking across the container.
Meteors
Installation
Add it with the CLI:
Terminal
$
Or open the Code tab above and copy it in manually — it relies on the standard cn() helper from @/lib/utils.
Usage
Place <Meteors /> inside a relative overflow-hidden element for a hero effect.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| number | number | 20 | How many meteors. |
| className | string | — | Extra classes. |
Requirements
No external npm dependencies. ✨
Add this to your Tailwind config:
tailwind.config.ts
// theme.extend
animation: { meteor: "meteor 5s linear infinite" },
keyframes: {
meteor: {
"0%": { transform: "rotate(215deg) translateX(0)", opacity: "1" },
"70%": { opacity: "1" },
"100%": { transform: "rotate(215deg) translateX(-500px)", opacity: "0" },
},
},