Particle Network

`<pura-particle-network>` is the iconic particles.js background: dots drift on a Canvas 2D field behind the slotted content and connect with lines whenever two of them get closer than `distance`. The pointer joins the network too: `pointer="grab"` (the default) draws lines from nearby particles to the cursor, `repulse` pushes particles away, `attract` pulls them in, and `none` disables the interaction. One requestAnimationFrame loop runs the simulation and pauses while the element is offscreen. The server renders a static, deterministic dot field, so the backdrop is presentable before any JS runs; the client canvas takes over on the first frame. Reduced motion freezes the canvas on a single connected frame (dots plus links, no drift). Theme it with `--pura-particle-network-color`, `--pura-particle-network-link-color`, `--pura-particle-network-opacity`, `--pura-particle-network-link-opacity`, `--pura-particle-network-link-width` and `--pura-particle-network-bg`. Each instance registers in `window.__puraParticleNetworks` by `data-pura-id` with `{ count, pointer, pause, resume }`.

Preview

<!-- hero backdrop: dots link up and grab toward the cursor -->
<pura-particle-network count="90" pointer="grab" style="height: 100vh; --pura-particle-network-bg: #09090b; --pura-particle-network-color: #71717a;">
  <header style="position: relative; z-index: 1; display: grid; place-items: center; height: 100%;">
    <h1>Build with pura</h1>
  </header>
</pura-particle-network>

<!-- denser field that scatters away from the pointer -->
<pura-particle-network count="120" distance="90" speed="25" pointer="repulse" pointer-distance="140" style="height: 320px; --pura-particle-network-link-color: var(--pura-accent, #6366f1);">
  <div style="padding: 2rem;">Cards, copy or anything else slots above the field.</div>
</pura-particle-network>

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

import "./pura/lib/particle-network.js";