Fly To Cart

`<pura-fly-to-cart>` is the motion.dev "add to cart" move: wrap any trigger (a button, a product card) and point `target` at the cart icon. On click, a dot launches from the trigger, arcs across the page (a three-keyframe WAAPI translate with a raised midpoint), shrinks as it travels, and lands on the target, which pulses on impact. The dot is created on `document.body` at click time because it has to travel outside any shadow root. The `land` event fires on arrival, so increment your cart badge there. Dot color comes from `--pura-fly-color` (default `--pura-accent`, then `--pura-fg`). Reduced motion skips the flight: the target still pulses subtly and `land` still fires. Each instance registers in `window.__puraFlyToCarts` by `data-pura-id` with `{ target, fly }`.

Preview

<pura-fly-to-cart target="#cart-icon">
  <button type="button">Add to cart</button>
</pura-fly-to-cart>

<span id="cart-icon">🛒 <span id="cart-count">0</span></span>

<script>
  document.querySelector("pura-fly-to-cart").addEventListener("land", () => {
    cart.add(product);
  });
</script>

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

import "./pura/lib/fly-to-cart.js";