View Transition

`<pura-view-transition>` morphs between UI states using the native View Transitions API with zero dependencies. Call `transition(updateFn)` to run any DOM update wrapped in a cross-fade; children that share a `view-transition-name` across the before and after states "magic move" between their positions. Set the `name` attribute to make the host itself a shared element across page-level transitions. When the API is unavailable or reduced motion is on, the update runs instantly and the same `pura-view-transition` events still fire, so callers stay API-agnostic. It registers in `window.__puraViewTransitions` for agent enumeration.

Preview

<pura-view-transition id="region">
  <span style="view-transition-name: card-a">A</span>
  <span style="view-transition-name: card-b">B</span>
</pura-view-transition>

<script>
  const region = document.querySelector('#region');
  // The reorder morphs: each named child slides to its new position.
  region.transition(() => region.append(region.firstElementChild));
</script>

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

import "./pura/lib/view-transition.js";