Scroll Reveal

`<pura-scroll-reveal>` reveals slotted content as it scrolls through the viewport, driven entirely by the native CSS scroll-driven-animation timeline (`animation-timeline: view()`). Where `<pura-reveal>` uses an IntersectionObserver to flip a binary hidden/visible state, this *scrubs* the entrance to the element's progress through the viewport, so scrolling halfway plays the animation halfway, and scrolling back reverses it, with no observer and no per-frame JavaScript. The whole effect is pure CSS, so it survives SSR untouched. Choose an `animation` (fade, slide-*, zoom, blur), a slide `distance`, and a `range` preset (`enter`, `cover`, `early`) or a raw CSS `animation-range`. When the engine lacks scroll timelines or the user prefers reduced motion, the content is simply visible from first paint. Each instance registers in `window.__puraScrollReveals` by `data-pura-id` and mirrors its resolved config in `data-pura-reveal-*` (animation, range, native).

Preview

<pura-scroll-reveal animation="slide-up">
  <article>
    <h3>Slide up</h3>
    <p>Scrubs in with the native scroll timeline, no IntersectionObserver.</p>
  </article>
</pura-scroll-reveal>

<pura-scroll-reveal animation="blur" range="cover" distance="40">
  <article>
    <h3>Blur across the crossing</h3>
    <p>Any raw CSS animation-range also works, e.g. range="entry 0% exit 0%".</p>
  </article>
</pura-scroll-reveal>

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

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