# Meteors

Source: https://lumeo.nativ.sh/components/meteors

# Meteors

Falling angled meteor streaks across a container — a dramatic decorative background effect.

## When to Use

-   Add atmosphere to hero sections, pricing cards, or dark-mode landing pages.
-   Create a "space" or "fast" feel behind feature spotlights.
-   Pair with a dark background card for maximum visual impact.

Preview Code

Default (20 meteors)

Shooting Stars

Copy Code

Preview Code

Custom count and color

Blue Meteors

Copy Code

## API Reference

Property

Type

Default

Description

Number

int

20

Number of meteor streaks to render.

Color

string

"var(--color-primary)"

CSS color of the meteor head and tail gradient.

Class

string?

null

Additional CSS classes on the container div.

## Related Components

-   [Sparkles](/components/sparkles) — Decorative sparkle particles around content.
-   [AnimatedGradientText](/components/animated-gradient-text) — Shifting gradient text animation.