v0.1 · MIT · ~1 kB min+gzip · zero deps

sprungdesign models motion as a real spring — mass, stiffness, damping — and computes the exact result, not a frame-by-frame guess. It's frame-rate independent, changes direction mid-animation without jumping, and works in React or anything else.

$npm install sprungdesign
Docs

Solved exactly

A real spring equation, frame-rate independent — no drift, no stutter.

Catch it mid-flight

Retarget while moving; the current speed carries over. No jumps.

~1 kB, zero deps

Tiny, tree-shakeable, SSR-safe. Nothing touches the DOM at import.

Physics or feel

Tune stiffness / damping / mass, or duration / bounce. Presets included.

Same math, four feels

Every preset below is the same math with different constants. This is the real library running.

ζ 0.39 · underdamped · 26% overshoot

Click anywhere — X and Y — to launch the ball there; it plays the graph at right. Click again mid-flight to retarget; velocity carries over.

target0s0.71s

The curve and dot are createSpring().at(t) sampled live — value vs. time.

Springs everywhere

The same engine drives real UI. Open the menu, throw the card — both run on sprungdesign.

Disclosure menu

Each row springs in on its own useSpring, staggered one after another.

Drag & release

Two springs chase your pointer, then snap the card home — velocity and all.

Drag the card anywhere and let go.

One hook in React.

useSpring re-renders with the live value each frame. When the target changes it keeps the current speed instead of snapping. It's SSR-safe and honors prefers-reduced-motion.

Explore docs →
import { useSpring } from "sprungdesign/react";

function Box({ open }: { open: boolean }) {
  const x = useSpring(open ? 200 : 0, {
    stiffness: 320,
    damping: 14,
  });

  return (
    <div style={{ transform: `translateX(${x}px)` }} />
  );
}