Velocity

`<pura-velocity>` is the motion.dev `useVelocity` move done as an element: the slotted content leans (skews) proportionally to how fast the page is scrolling, snapping upright again the moment scrolling stops. Scroll fast and a headline tips into the motion; flick the wheel and it sways. A passive scroll listener samples velocity in px/ms and a requestAnimationFrame loop lerps the rendered lean toward it while the target decays to zero, then the loop stops entirely once settled under a hundredth of a degree, so the component does zero idle work. The lean is clamped to `max` degrees and written to one custom property (`--pura-velocity-skew`) consumed by the shadow template. Under `prefers-reduced-motion` nothing binds and the content stays upright; SSR renders unskewed. Each instance registers in `window.__puraVelocities` by `data-pura-id`, and `data-pura-velocity-active` mirrors whether the loop is live.

Preview

<!-- headline that leans into the scroll -->
<pura-velocity>
  <h2>THE FASTER YOU SCROLL</h2>
</pura-velocity>

<!-- stronger, snappier -->
<pura-velocity max="10" factor="14" decay="0.2">
  <h2>WHIPLASH</h2>
</pura-velocity>

<!-- horizontal skew instead -->
<pura-velocity axis="x" max="4">
  <img src="/banner.jpg" alt="" />
</pura-velocity>

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

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