Magnetic

`<pura-magnetic>` is Draggable + Inertia. In the default `lean` mode the slotted content leans toward the pointer as it nears (within `radius`) and springs back to rest on leave, the awwwards magnetic-button move. In `drag` mode the content follows the pointer 1:1 while held and springs back to its origin on release with a flick-momentum bounce. Both settles use the native spring primitive (`<pura-spring>`): the return is a CSS transition whose timing function is a sampled `linear(...)` spring, so there is no rAF loop. With no JS, and on the server, the content sits untransformed and fully usable. Each instance registers in `window.__puraMagnetics` by `data-pura-id` with `{ mode, reset }`.

Preview

<!-- magnetic button -->
<pura-magnetic strength="0.5">
  <button>Hover me</button>
</pura-magnetic>

<!-- draggable chip that springs home -->
<pura-magnetic mode="drag" preset="wobbly">
  <span class="chip">Drag</span>
</pura-magnetic>

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

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