Clip Reveal

`<pura-clip-reveal>` reveals its slotted content with an animating `clip-path` wipe, the awwwards image-wipe done natively. `direction="up"|"down"|"left"|"right"` slides an `inset()` open from one edge; `direction="circle"` irises a `circle()` out from the center. Both forms interpolate natively, so the default `trigger="scrub"` ties the wipe 1:1 to a scroll-driven timeline (`animation-timeline: view()` or `scroll()`) with no per-frame JS. `trigger="view"` wipes open once when scrolled into view (eased by the spring primitive); `trigger="load"` wipes open once on connect. SSR and reduced motion are safe: before JS the content sits fully revealed (the hide only engages once a trigger applies), the scrub block is gated behind `prefers-reduced-motion: no-preference`, and reduced motion shows the content revealed. Each instance registers in `window.__puraClipReveals` by `data-pura-id` with `{ direction, replay }`.

Preview

<!-- default: wipes open bottom-to-top as you scroll -->
<pura-clip-reveal>
  <img src="/hero.jpg" alt="" style="display:block;width:100%" />
</pura-clip-reveal>

<!-- iris out from the center, once on view -->
<pura-clip-reveal direction="circle" trigger="view" preset="snappy">
  <div class="card">Surprise</div>
</pura-clip-reveal>

<!-- left-to-right wipe scrubbed against the page scroll -->
<pura-clip-reveal direction="right" timeline="scroll" range="cover 0% cover 100%">
  <h2>Headline</h2>
</pura-clip-reveal>

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

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