Scroll Timeline

`<pura-scroll-timeline>` is a section-scoped scroll progress that pauses on intent. Where `<pura-scroll-progress>` is a single global reading bar fixed to the top of the viewport (always live, no interaction), this wraps one section and tracks how far *that element* has travelled through the viewport, then freezes its advance the moment the reader shows intent to engage: hovering or keyboard-focusing inside the section. Freezing while engaged stops the motion from competing for attention exactly when someone is reading or operating the content, and the held state is exposed (`data-pura-intent="engaged"`, an `intent` event) so an agent can tell a section is being attended to. The bar is a real `role="progressbar"` with a live `aria-valuenow`; progress is carried by the static fill width, never motion alone. It publishes `--pura-timeline-progress` (0..1, held while engaged) and `--pura-timeline-paused`, which inherit across the shadow boundary so consumer CSS can scrub or pause anything against the section. The pure model (`computeViewProgress`, `timelineState`) is DOM-free and unit-tested. Durations multiply `var(--pura-motion)`, so a `<pura-motion-budget>` governor or reduced motion calms the fill. Set `intent` to `hover`, `focus`, `both` (default) or `none`. Each instance registers in `window.__puraScrollTimelines` by `data-pura-id`.

Preview

<pura-scroll-timeline intent="both">
  <article>... a long section ...</article>
</pura-scroll-timeline>

<script type="module">
  const tl = document.querySelector('pura-scroll-timeline');
  tl.addEventListener('intent', (e) => {
    // e.detail.engaged is true while the reader hovers/focuses the section
    if (e.detail.engaged) console.log('reader attending at', e.detail.progress + '%');
  });
</script>

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

import "./pura/lib/scroll-timeline.js";