Meteors
Animated meteor shower effect with configurable count, speed, and color.
Preview
Meteors
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Card backgrounds and dark-mode accent effects.
Why this component matters
Subtle, non-interactive motion adds life to static cards without user effort.
Usage guidance
Best contained inside a card or bounded area. Set count to 8-12 for subtlety. Use as a background layer behind card content, not as a standalone effect.
Installation
bash
npx shadcn@latest add @aceternity/meteorsUsage
example.tsxtsx
import { Meteors } from "@/components/ui/meteors";
export default function Example() {
return (
<Meteors>
{/* Your content here */}
</Meteors>
);
}Source
meteors.tsx
components/ui/meteors.tsx