Meteor Effect
A group of beams in the background of a container, sort of like meteors.
background
config
About
The original idea of the <MeteorEffect /> component is coming from aceternity website.
Installation
Run the following command:
npx ever-ui-clx@0.2.1 add demo-meteor-effectUpdate tailwind.config.ts
Modify your tailwind.config.ts as follows:
// tailwind.config.ts
module.exports = {
theme: {
extend: {
keyframes: {
meteor: {
"0%": { transform: "rotate(215deg) translateX(0)", opacity: "1" },
"70%": { opacity: "1" },
"100%": {
transform: "rotate(215deg) translateX(-500px)",
opacity: "0",
},
},
},
animation: {
"meteor-effect": "meteor 5s linear infinite",
},
},
},
};Usage