Meteors

CSS-animated meteor shower effect. Drop into any relative-positioned container.

Meteor Shower

Installation

Run the CLI

$npx particleui-cli add meteors

Usage

TSX

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

export default function Example() {
  return (
    <div className="relative h-48 overflow-hidden rounded-xl border border-border">
      <Meteors number={20} />
    </div>
  )
}

Props

Prop	Type	Default	Required
count	number	`18`	no
className	string	—	no
color	string	`"var(--color-accent)"`	no

Details

Source filecomponents/ui/meteors.tsx

Typeui

Categoriesbackground, particles

npm dependencies

Registry deps

Claude skill—