Standardized design tokens that quantify animation parameters—such as spring stiffness, damping, mass, and easing curves—in a machine-readable format across platforms.
Detailed Explanation & Context
Motion Tokens extend the design token methodology (traditionally applied to colors, typography, and spacing) to the domain of interaction physics and animation. Rather than hardcoding 300ms ease-out transitions in CSS files, motion tokens define semantic animations (e.g., motion.spring.snappy or motion.transition.page-enter) as structured JSON variables that compile seamlessly into CSS custom properties, Tailwind plugins, iOS Swift asset catalogs, and Android Compose files.
{
"motion": {
"spring": {
"snappy": { "stiffness": 520, "damping": 24, "mass": 1.0 }
}
}
}Key Takeaways
- Guarantees visual and physical consistency across Web, iOS, and Android applications.
- Replaces arbitrary duration numbers with structured physical properties.
- Supports automated accessibility overrides for prefers-reduced-motion.
:root {
--motion-spring-snappy-stiffness: 520;
--motion-spring-snappy-damping: 24;
--motion-spring-snappy-mass: 1.0;
}Related Glossary Terms
Pillar Guides & Tools
Apply in Your Application
ExodeUI makes modern motion engineering effortless. Design visually and compile clean, accessible components directly to production.