Most product interfaces have a motion language by accident — animations layered in component by component until the product moves but doesn't feel like anything. Motion Manifesto is the alternative: a production-quality interactive reference built to prove that intentional motion is a design system concern, not an afterthought.
Five Primitives, Five Principles
Self-initiated. The project is structured around five fundamental interaction primitives — The Arc, The Count, The Reveal, The State, and The Nudge — each paired with an explicit named design principle.
Every primitive exposes its animation parameters as live, adjustable controls. The goal was to replace subjective motion debates (should this slide or fade?) with a shared vocabulary and tested implementation. The site functions as a design handoff reference between designers and engineers.
Engineering decisions were made at the system level. CSS @keyframes were chosen over Framer Motion's JS runtime on specific primitives (The Nudge) to avoid compositor-blocking infinite animations. useMotionValue drove the DOM natively in The Count, bypassing React's render cycle entirely to eliminate sub-pixel jitter.
A Motion System, Not a Component Library
A publicly accessible design systems case study demonstrating motion thinking from token definition to production deployment. The five primitives are designed to cascade upward — every complex animation in a real product is composed from these building blocks, intentionally combined.
Full accessibility: useReducedMotion() is respected across all primitives. Durations collapse to zero, springs are removed, and error shakes are suppressed under the system preference.
