MeteorsPro

• Launch announcements, pricing highlights and dark hero cards.

• Light, calm interfaces: the effect is loud.

Import it from @/components/ui/meteors after installing.

import { Meteors } from "@/components/ui/meteors";

<div className="relative overflow-hidden rounded-3xl p-8">
  <Meteors count={12} />
  <h3 className="relative">Launch week</h3>
</div>

• Decorative and aria-hidden; not rendered under reduced motion.

• Each meteor streaks with its own speed and delay, then waits before repeating.

• Spread across the parent's width.

• Transform and opacity only; positions are deterministic so server and browser match.

• Works best on dark backgrounds.