Meteors

`<pura-meteors>` paints a field of diagonal shooting-star streaks behind its slotted content, in the style of Magic UI's Meteors. The meteors are scattered deterministically in the pure template (no `Math.random`), so the server and client render the same field and the effect needs no client JS. Each streak is a CSS `@keyframes` fall with a gradient tail, so there is no animation runtime. Set `count` for density and theme the streaks with `--pura-meteor-color` and `--pura-meteor-glow`. Under reduced motion the meteors hold still via the base reset. It registers in `window.__puraMeteors` by `data-pura-id` for agent enumeration.

Preview

<pura-meteors count="20" style="background: #0b1020; --pura-meteor-color: #e0e7ff;">
  <div class="hero">Content above the meteor field</div>
</pura-meteors>

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

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