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.

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 :class, :any, default: nil, doc: "extra classes for the container"
  attr :rest, :global