Aurora

`<pura-aurora>` lays a slowly drifting aurora-light gradient behind its slotted content, in the style of Magic UI's Aurora background. The motion is a single pure CSS `@keyframes` pan and rotate over four blurred color blobs, so it works server-rendered with no client JS and no animation runtime. Theme the four blobs with `--pura-aurora-1` through `--pura-aurora-4`, and tune `--pura-aurora-opacity`, `--pura-aurora-blur`, and `--pura-aurora-duration`. Under reduced motion the field rests as a static gradient via the base reset. It registers in `window.__puraAuroras` by `data-pura-id` for agent enumeration.

Preview

<pura-aurora>
  <section class="hero">Headline over an aurora glow</section>
</pura-aurora>

<!-- Custom palette -->
<pura-aurora style="--pura-aurora-1: #f97316; --pura-aurora-2: #ec4899; --pura-aurora-3: #8b5cf6;">
  <section class="hero">Warm aurora</section>
</pura-aurora>

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/aurora.js"></script>

import "./pura/lib/aurora.js";