Scroll Highlight

`<pura-scroll-highlight>` is the motion.dev "highlight text" move: a paragraph where the words light up one by one as you scroll, like a reader following the line. The host carries a named view timeline (`view-timeline: --pura-shl`) and the element splits the slotted text into word spans, each animating its color on that shared timeline with its own contiguous `animation-range` slice, so the highlight sweeps through the text 1:1 with scroll and no per-frame JS runs. `start` and `end` set the view progress window (cover %) over which the sweep happens. Colors come from `--pura-scroll-highlight-color` (highlighted, default `currentColor`) and `--pura-scroll-highlight-base` (dimmed, default 30% `currentColor`). The split words are an aria-hidden shadow copy; the slot stays as the accessible original. SSR, no scroll-timeline support, and reduced motion all show the text fully highlighted, never dimmed.

Preview

<!-- words highlight as the paragraph crosses the viewport -->
<pura-scroll-highlight>
  Long-form copy that reads itself in as you scroll.
</pura-scroll-highlight>

<!-- custom window and colors -->
<pura-scroll-highlight start="20" end="60"
  style="--pura-scroll-highlight-color: #a3e635; --pura-scroll-highlight-base: #3f3f46;">
  Lime sweep over zinc.
</pura-scroll-highlight>

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

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