Auto Animate

`<pura-auto-animate>` is a drop-in layout animator: wrap any list, grid, or container and its direct children animate automatically on add, remove, and reorder, with no per-item wiring and no keyframes to author. A `MutationObserver` watches the light-DOM children and pura's FLIP engine (`animate.js`, WAAPI under the hood) tweens the layout delta, scale-correcting size changes and fading removed nodes out from their last position. FLIP is one of only two JS-tweening primitives pura ships, fully opt-in: set `disabled` to pause it and `duration` to override the token-derived timing. It no-ops the animation under reduced motion (children still mutate) and registers in `window.__puraAutoAnimate` for agent enumeration.

Preview

<pura-auto-animate>
  <div>First item</div>
  <div>Second item</div>
</pura-auto-animate>

<script>
  // Any add/remove/reorder of the children animates automatically.
  const list = document.querySelector('pura-auto-animate');
  list.prepend(makeItem());   // animates in
  list.children[2].remove();  // animates out
</script>

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

import "./pura/lib/auto-animate.js";