Meteor Effect
A group of beams in the background of a container, sort of like meteors.
Installation
Run the following command
npx shadcn@latest add @aceternity/meteors
Choose your Tailwind CSS version
For Tailwind CSS v4, add this to your CSS file:
@theme inline {
--animate-meteor-effect: 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
Prop name | Type | Description |
---|---|---|
className | string | The class name of the child component. |
number | number | The number of meteors you want in the card |
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
70+ templates and component blocks combined
Ready to copy paste component blocks, save days of development time

