Border Beam

`<pura-border-beam>` sends a comet of light traveling around the rounded border of any container, in the style of Magic UI's Border Beam. The motion is pure CSS: the beam is a `::after` pseudo-element following `offset-path: border-box`, so there is no animation runtime and the effect works server-rendered with no client JS. Tune it with the `size`, `duration`, and `delay` attributes, or theme the gradient with `--pura-border-beam-from` and `--pura-border-beam-to` (default primary→accent). Under reduced motion the beam rests statically via the base reset. It registers in `window.__puraBorderBeams` by `data-pura-id` for agent enumeration.

Preview

<pura-border-beam size="60" duration="4">
  <div class="card">Framed content</div>
</pura-border-beam>

<!-- Custom beam colors -->
<pura-border-beam style="--pura-border-beam-from: #06b6d4; --pura-border-beam-to: #3b82f6;">
  <div class="card">Cyan beam</div>
</pura-border-beam>

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

import "./pura/lib/border-beam.js";