Motion

`<pura-motion>` is pura's foundational presence wrapper: it animates any slotted content in and out as the `show` attribute is toggled, with seven presets (fade, slide-up/down/left/right, scale, fade-slide). The motion is pure CSS driven entirely by `show`, so there is no JS animation runtime: content rendered already-`show` on the server snaps in with no hydration flash, and the transition only runs when `show` is toggled at runtime. When hidden the content leaves layout (`display: none` via `allow-discrete`), and under reduced motion the whole transition is skipped for an instant display swap. It has an agent-native layer: each instance registers in `window.__puraMotions` by `data-pura-id` and mirrors config and live state in `data-pura-motion-*` attributes, letting an agent enumerate, read, and drive every transition without traversing the DOM.

Preview

<pura-button onclick="document.querySelector('#panel').toggle()">Toggle</pura-button>

<pura-motion id="panel" show animation="slide-up">
  <article>
    <h3>Animated panel</h3>
    <p>This block slides up and fades as it enters, and reverses on exit.</p>
  </article>
</pura-motion>

<!-- Imperative API -->
<script>
  const m = document.querySelector('#panel');
  m.enter();   // show
  m.exit();    // hide
  m.toggle();  // flip
</script>

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

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