Tracing Beam

`<pura-tracing-beam>` puts a vertical gradient beam with a glowing dot beside the slotted content and draws it in as you read, the Aceternity "Tracing Beam" / modern changelog-timeline move. Unlike `<pura-draw>` (generic, needs a supplied SVG path), the track here is generated for you: a ResizeObserver sizes the rail SVG to the content height, and the draw itself is pure CSS, `stroke-dashoffset` and the dot position riding the host's named view timeline (`animation-timeline`), so no per-frame JS runs. `side` flips the rail to the right, `range` tunes the scroll window, `timeline="scroll"` binds to the nearest scroll container instead. Gradient stops come from `--pura-tracing-beam-from` / `-via` / `-to`, the faint rail from `--pura-tracing-beam-track`. SSR, pre-JS, browsers without scroll-driven timelines and reduced motion all render the faint track plus the fully drawn beam, with the dot hidden. Each instance registers in `window.__puraTracingBeams` by `data-pura-id` with `{ side, height }`.

Preview

<!-- changelog: the beam traces your reading progress -->
<pura-tracing-beam>
  <article>
    <h3>v2.0</h3>
    <p>Scroll-driven everything.</p>
  </article>
  <article>
    <h3>v1.0</h3>
    <p>First release.</p>
  </article>
</pura-tracing-beam>

<!-- rail on the right, custom gradient, shorter scroll window -->
<pura-tracing-beam side="right" range="cover 0% cover 85%"
  style="--pura-tracing-beam-from: #a3e635; --pura-tracing-beam-via: #22d3ee; --pura-tracing-beam-to: #f472b6;">
  <section>
    <h3>Timeline entry</h3>
    <p>The dot and beam land just before the content scrolls out.</p>
  </section>
</pura-tracing-beam>

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

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