04 / 20Design systems & a11y
Motion Lab
A spring-physics playground and motion guidelines for when animation helps and when it hurts.
- Spring physics
- FLIP animations
- Gesture handling
- Reduced motion
- Motion design
stirling.lab/motion-lab Live demo
Loading demo…
What to notice
- Hand-written spring integrator with live stiffness/damping/mass curves
- FLIP layout transitions for reordering, done without an animation library
- Drag with momentum and rubber-banding, like native iOS
- Every demo honors prefers-reduced-motion with a meaningful alternative
How it's built
- The spring uses semi-implicit Euler at a fixed timestep for frame-rate independence.
- FLIP measures First/Last rects and animates only transform and opacity, so it stays on the compositor.
Hand-built in React 19 + TypeScript, with no UI or chart libraries.