# Meteors

> Shooting stars streaking across a card or hero.

Component · Pro · https://lodeui.com/components/meteors

## When to use

- Launch announcements, pricing highlights and dark hero cards.

## When not to use

- Light, calm interfaces: the effect is loud.

## Installation

```bash
npx shadcn@latest add @lode/meteors
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
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>
```

## API reference

### Meteors

Absolutely positioned streaks that fall across the parent.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| count | `number` | `14` | How many meteors. |
| angle | `number` | `215` | Direction of travel in degrees. |

## Accessibility

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

## Motion

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

## Responsive behavior

- Spread across the parent's width.

## Performance

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

## Notes for AI

- Works best on dark backgrounds.

## Related

- [Particles](https://lodeui.com/components/particles) — A drifting constellation of dots on canvas that moves away from the pointer.
- [Border beam](https://lodeui.com/components/border-beam) — A light that travels around an element's border.
- [CTA section](https://lodeui.com/blocks/cta-section) — A dark closing call to action with meteors and an email capture.