Animated Beam

`<pura-animated-beam>` draws a beam of light travelling along an SVG path that connects two slotted anchor elements, the canonical "your app talks to these APIs" integration-diagram visual. Mark the anchors with `data-from` and `data-to` (or point `from` / `to` at any CSS selector inside the component); the client measures their centers, generates a quadratic Bezier (`curvature` controls the bow) and sweeps a gradient pulse along the stroke every `duration` ms, recomputing on resize and slot changes. Colors come from `--pura-animated-beam-from` / `--pura-animated-beam-to`, the idle path from `--pura-animated-beam-track`, thickness from `--pura-animated-beam-width`. SSR and pre-JS paint only the container and the slotted nodes (the beam is progressive enhancement); reduced motion shows a static gradient stroke instead of a moving pulse. Each instance registers in `window.__puraAnimatedBeams` by `data-pura-id`, and `data-pura-beam-state` / `data-pura-beam-length` mirror the live state.

Preview

<!-- beam between two anchors marked with data-from / data-to -->
<pura-animated-beam curvature="48" style="height: 220px;">
  <div data-from class="node" style="position: absolute; left: 24px; top: 50%;">App</div>
  <div data-to class="node" style="position: absolute; right: 24px; top: 50%;">Stripe</div>
</pura-animated-beam>

<!-- custom selectors, reversed flow and custom colors via tokens -->
<pura-animated-beam from="#server" to="#db" reverse curvature="-40" duration="3000"
  style="height: 240px; --pura-animated-beam-from: #22d3ee; --pura-animated-beam-to: #6366f1;">
  <div id="server" class="node" style="position: absolute; left: 32px; top: 32px;">Server</div>
  <div id="db" class="node" style="position: absolute; right: 32px; bottom: 32px;">Database</div>
</pura-animated-beam>

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

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