A soft animated aurora glow behind your content - the hero-section backdrop. Pure CSS (blurred repeating gradients blended over a stripe texture); the optional PetalAurora hook pauses the animation while the section is off-screen.

The wrapper sizes to its content, so a padded hero just works:

<.aurora class="rounded-2xl">
  <div class="px-8 py-24 text-center">
    <h1>Ship your SaaS this weekend</h1>
    <.button label="Get started" />
  </div>
</.aurora>

Pass any palette and the gradient is built for you:

<.aurora colors={["#f97316", "#f43f5e", "#fbbf24"]}>...</.aurora>

By default the effect auto-adapts: inverted on light backgrounds, un-inverted in dark mode (invert="always" / invert="none" to force). Respects prefers-reduced-motion (the drift freezes, the glow stays).

Attributes

• id (:string) - defaults to a generated id (needed by the pause-offscreen hook).
• colors (:list) - 3-6 CSS colors; the aurora gradient is built from them in order. Defaults to ["#3b82f6", "#a5b4fc", "#93c5fd", "#ddd6fe", "#60a5fa"].
• invert (:string) - auto inverts on light and not in dark; none/always force one look. Defaults to "auto". Must be one of "auto", "none", or "always".
• speed (:string) - duration of one drift cycle. Defaults to "60s".
• opacity (:string) - strength of the glow. Defaults to "0.5".
• blur (:string) - softness of the glow. Defaults to "10px".
• mask_position (:string) - where the glow concentrates (radial mask origin), e.g. "50% 0" for top-centre. Defaults to "100% 0".
• mask_coverage (:string) - inner/outer stops of the radial mask - widen to flood more of the container. Defaults to "10%, 70%".
• class (:any) - CSS class. Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block