Motion UI Library
Open Source · Frontend · 2024
A zero-dependency animation library for React built on the Web Animations API. Ships 12 composable hooks (useSpring, useDrag, useParallax…) with full TypeScript types and tree-shaking support.
Interactive drag-and-spring demo
Architecture
Web Animations API · React hooks · Rollup bundler
Each hook wraps the browser-native Web Animations API, deferring to GPU-composited transforms where possible. The spring physics engine is a single 80-line Runge-Kutta integrator — no external dependency.
ts
// Runge-Kutta 4 spring integrator
function rk4(pos: number, vel: number, dt: number, config: SpringConfig) {
const { stiffness, damping, mass } = config;
const a = (target: number) =>
(-stiffness * (pos - target) - damping * vel) / mass;
const k1v = a(0), k1x = vel;
const k2v = a(-k1x * dt / 2), k2x = vel + k1v * dt / 2;
const k3v = a(-k2x * dt / 2), k3x = vel + k2v * dt / 2;
const k4v = a(-k3x * dt), k4x = vel + k3v * dt;
return {
pos: pos + (dt / 6) * (k1x + 2*k2x + 2*k3x + k4x),
vel: vel + (dt / 6) * (k1v + 2*k2v + 2*k3v + k4v),
};
}Performance
All animations run on the compositor thread — zero JS jank during scroll. Bundle size is 3.2 kB gzipped. The library ships separate CJS and ESM builds so bundlers can tree-shake unused hooks.