Meteors

Meteors renders a shower of meteors streaking across its parent container. Positions, delays and durations are generated server-side, so the whole effect is pure CSS and ships zero JavaScript. Drop it behind a dark hero or card to add motion without touching your bundle.

Basic Meteors

The component fills its nearest relative ancestor, so give the container relative and overflow-hidden. Content inside the same container needs relative too, otherwise it sits underneath the meteor layer. The layer is decorative: it renders with aria-hidden and meteors are hidden for users who opt out of animation via prefers-reduced-motion.

Density and Seed

count controls how many meteors render. Positions are deterministic for a given seed, so LiveView re-renders never make the meteors jump. When rendering several meteor fields on one page, give each a different seed so they don't share the same scatter pattern.

Direction and Colour

New in 4.4.0: angle points the shower anywhere (the default streaks down-left), color tints the meteors and their trails, and reverse mirrors the whole field so meteors stream the other way.

Hero Example

Meteors read best on near-black panels. Here's a fuller hero: heading, subtitle and a call to action sitting on a relative wrapper above the shower.

Properties