Background Beams

`<pura-beams>` paints light beams traveling along curved SVG paths behind its slotted content, in the style of Aceternity UI's Background Beams. Each path renders twice: a faint base trace, plus a glowing gradient dash animated with `stroke-dasharray` and `stroke-dashoffset` in pure CSS `@keyframes` on a staggered infinite loop. Path geometry and per-beam timing are deterministic index math in the pure template (no `Math.random`), so the server and client paint byte-identical scenes and the effect needs no client JS. Set `count` for density and `duration` for the base loop speed; theme the gradient with `--pura-beams-color-a`, `--pura-beams-color-b` and `--pura-beams-color-c`, and the traces with `--pura-beams-trace-color`. Under reduced motion the dashes rest off-path and only the calm static traces remain. Each instance registers in `window.__puraBeamss` by `data-pura-id` for agent enumeration.

Preview

<!-- hero section with beams sweeping behind the content -->
<pura-beams count="12" style="min-height: 60vh; background: #0b1020;">
  <div class="hero">
    <h1>Ship faster</h1>
    <p>Content layers above the beam field.</p>
  </div>
</pura-beams>

<!-- slower loop with a custom warm gradient -->
<pura-beams count="6" duration="12"
  style="--pura-beams-color-a: #fbbf24; --pura-beams-color-b: #f97316; --pura-beams-color-c: #ef4444; --pura-beams-width: 3; background: #1c1007;">
  <div class="hero">Warm beams</div>
</pura-beams>

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

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