Meteors
Installation
Run the following command:
npx magicui-cli add meteors
Update tailwind.config.js
Add the following animations to your tailwind.config.js
file:
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
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,
},
},
},
},
},
};
Props
Meteors
Prop | Type | Description | Default |
---|---|---|---|
number | number | Number of meteors | 20 |