Particles

`<pura-particles>` floats a field of small dots that drift and twinkle behind its slotted content, in the style of Magic UI's Particles. The motion is pure CSS: each dot rides a deterministic `@keyframes` (fixed position and timing per index, so server and client paint byte-identically), with no animation runtime. Set the density with `count`, and theme with `--pura-particle-color` and `--pura-particle-opacity`. Under reduced motion the field comes to rest via the base reset. It registers in `window.__puraParticles` by `data-pura-id` for agent enumeration.

Preview

<pura-particles count="80">
  <section class="hero">Content over a particle field</section>
</pura-particles>

<!-- Sparser, custom color -->
<pura-particles count="40" style="--pura-particle-color: #38bdf8;">
  <div>...</div>
</pura-particles>

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

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