Spring

`<pura-spring>` is the spring primitive the rest of pura's motion is built on. A damped harmonic oscillator (stiffness, damping, mass) is sampled once and serialized into a CSS `linear(...)` easing string, giving a native spring with real overshoot and settle, no per-frame JS, no rAF loop, no library. The exported pure `spring(opts)` returns `{ easing, duration }` you drop straight into a `transition` or `animation`; `split`, `magnetic`, `tilt` and the other motion components import it instead of reinventing the math. The element itself is a tiny demo: poke the token and it springs along the rail with the curve you configured. Named presets (`gentle`, `wobbly`, `stiff`, `slow`, `snappy`) mirror the vocabulary motion designers expect. Each instance registers in `window.__puraSprings` by `data-pura-id` with `{ profile, poke }`, and `data-pura-spring-duration` / `-zeta` mirror the resolved curve.

Preview

<!-- as a demo element -->
<pura-spring preset="wobbly"></pura-spring>

<!-- as the primitive, in your own component -->
<script type="module">
  import { spring } from './spring.js';
  const { easing, duration } = spring({ stiffness: 200, damping: 18 });
  el.style.transition = `transform ${duration}ms ${easing}`;
  el.style.transform = 'translateX(190px)'; // overshoots, then settles
</script>

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

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