PetalComponents.Meteors (petal_components v4.1.0)

Copy Markdown View Source

A shower of meteors streaking across the parent container. Pure CSS — positions, delays and durations are generated server-side, so the effect costs zero JavaScript.

Place it inside any relative container (a hero section, a card) and it fills the space behind your content.

Summary

Functions

meteors(assigns)

Renders a meteor shower that fills its nearest relative ancestor.

Functions

meteors(assigns)

Renders a meteor shower that fills its nearest relative ancestor.

<div class="relative overflow-hidden rounded-xl bg-gray-950 p-12">
  <.meteors count={30} />
  <.h2 class="relative text-white">Ship faster with Petal</.h2>
</div>

Meteor positions are deterministic for a given seed, so LiveView re-renders never make the meteors jump.

Attributes

  • count (:integer) - number of meteors. Defaults to 20.
  • seed (:integer) - vary this when rendering several meteor fields on one page so each gets a different scatter pattern. Defaults to 0.
  • class (:any) - extra classes for the container. Defaults to nil.
  • Global attributes are accepted.