Motion Tokens
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. A token build tool such as Style Dictionary turns them into CSS custom properties and code for iOS, Android and other platforms.
{
"motion": {
"spring": {
"snappy": { "stiffness": 520, "damping": 24, "mass": 1.0 }
}
}
}Key Takeaways
- Keeps motion consistent across web, iOS and Android when every platform reads the same tokens.
- 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 Motion Tokens in Your Application
ExodeUI makes modern motion engineering effortless. Design visually and compile clean, accessible components directly to production.