Wipe

`<pura-wipe>` is the page-transition wipe, the classic awwwards route-change move: a full-viewport panel sweeps across the screen, fully covers it, then exits on the far side. Call `play()` and swap your content in the `cover` event (or after the returned promise resolves), while the screen is hidden; `done` fires when the panel has left. The panel sits off-screen with `pointer-events: none` until then, so it can never block the page, and any slotted content (a logo, a word) shows centered on it during the sweep. `direction` picks the entry side, `duration` the sweep speed, `hold` how long the cover lasts. Color comes from `--pura-wipe-color` (default `--pura-fg`). Reduced motion snaps instead of sweeping, on the same clock, so content swaps keep working. Each instance registers in `window.__puraWipes` by `data-pura-id` with `{ direction, play }`.

Preview

<pura-wipe id="wipe" direction="left" duration="600">LOGO</pura-wipe>

<script>
  const wipe = document.getElementById("wipe");
  async function goTo(route) {
    await wipe.play(); // resolves with the screen covered
    swapContent(route); // invisible to the user
  }
  // or event-style:
  wipe.addEventListener("cover", () => swapContent(nextRoute));
  wipe.addEventListener("done", () => console.log("transition finished"));
</script>

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

import "./pura/lib/wipe.js";