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

          
  attr :count, :integer, default: 20, doc: "number of meteors"
  attr :seed, :integer, default: 0, doc: "vary this when rendering several meteor fields on one page so each gets a different scatter pattern"
  attr :angle, :string, default: "215deg", doc: "direction the meteors travel, as a CSS angle (default streaks down and to the left)"
  attr :color, :string, default: "#64748b", doc: "meteor and trail colour. Any CSS colour; the default slate suits dark panels"
  attr :reverse, :boolean, default: false, doc: "mirror the shower horizontally, so meteors stream the opposite way"
  attr :class, :any, default: nil, doc: "extra classes for the container"
  attr :rest, :global