FLIP reorder — the JS↔CSS bridge

element.animate() accepts linear() easing strings, so the bridge reads the spring tokens off getComputedStyle(:root) — cached, pinned fallback, reduced-motion guarded — and a JS FLIP rides the EXACT curve the CSS uses. One physics, two runtimes.

readMotionToken()springAnimate()flipFrom()

Tier semantics in the reorder: the item you ACTED on is the event — it lands on the bounce tier (ζ.34, 620ms). Displaced neighbors are consequences — they ride the calmer spring (ζ.48, 500ms). Cause and effect get different physics.

Task queue

promote a row — or restack the lot

1rotate edge certificatesP2
2drain relay-02 trafficP1
3compact event storeP3
4rebuild search indexP4
5verify cold snapshotsP5

The bridge

same tokens, read once, fed to WAAPI

const easing = getComputedStyle(document.documentElement)
  .getPropertyValue("--ease-spring");        // "linear(0 0%, 0.1455 4.2%, …)"

el.animate(
  [{ transform: `translate(${dx}px, ${dy}px)` }, { transform: "none" }],
  { duration: motionMs("--motion-spring"), easing },   // WAAPI takes linear()
);
// cached per token · pinned cubic-bezier fallback · no-op under reduced motion