Tilt

`<pura-tilt>` is the 3D hover-tilt card move: the slotted content rotates toward the pointer in perspective (rotateX/rotateY track the pointer across the surface), then springs back flat on leave. The tracking is event-driven, pointermove writes `--pura-tilt-rx`/`--pura-tilt-ry`, no rAF loop; while the pointer drives, the transition is disabled so the card tracks raw, and the settle-back uses a sampled spring `linear(...)` easing, same mechanism as `<pura-magnetic>`. `glare` adds a radial highlight that follows the pointer. `reverse` tilts away instead of toward. Under `prefers-reduced-motion` the pointer logic never binds, so the card stays flat; SSR renders flat as well. Each instance registers in `window.__puraTilts` by `data-pura-id` with `{ max, reset }`, and `data-pura-tilt-active` mirrors hover state for agents and styling.

Preview

<!-- basic tilt card -->
<pura-tilt>
  <div class="card">...</div>
</pura-tilt>

<!-- the full awwwards move: stronger angle, lift, glare -->
<pura-tilt max="16" scale="1.05" glare>
  <img src="/poster.jpg" alt="Poster" style="display:block; border-radius: 12px;" />
</pura-tilt>

<!-- subtle, away-from-pointer (parallax background feel) -->
<pura-tilt max="6" reverse preset="gentle">
  <div class="panel">...</div>
</pura-tilt>

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

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