Shooting meteors fly across any card with a simple wrapper component.
Meteors Effect
Installation
Usage
import { Meteors, MeteorsCard } from "@/components/pioneerui/meteors"
// Pre-built card wrapper
export default function Demo() {
return (
<MeteorsCard>
<p className="text-2xl font-bold">Meteors Effect</p>
</MeteorsCard>
)
}
// Or add Meteors to any overflow-hidden container
function CustomSection() {
return (
<div className="relative overflow-hidden rounded-2xl p-8">
<Meteors number={30} />
<div className="relative z-10">Content here</div>
</div>
)
}Props — Meteors
| Prop | Type | Default | Description |
|---|---|---|---|
number | number | 20 | Number of meteors to render |
className | string | — | Extra classes applied to each meteor |
Props — MeteorsCard
| Prop | Type | Default | Description |
|---|---|---|---|
meteorCount | number | 20 | Number of meteors |
className | string | — | Classes for the card wrapper |
children | ReactNode | — | Card content |