motion-discipline

Standardize UI motion by enforcing a default 200ms ease-out duration for transitions, avoiding spring-based animations, and implementing a prefers-reduced-motion path to ensure safe and predictable interactions.

Avoid spring animations in design systems to reduce distraction and improve accessibility. Standardizing UI motion with calm ease-out curves prevents overshooting effects, ensuring safe and predictable interactions for users.

Yes, this motion standardization works with Framer Motion, CSS transitions, and Tailwind animations. It audits and enforces consistent motion usage across these codebases, applying a 200ms ease-out default and reduced-motion preferences.

Configure a prefers-reduced-motion path by honoring user preferences and disabling unnecessary animations. Apply the motion discipline by setting components to use a 200ms ease-out transition and ensuring reduced-motion preferences are respected across interactions.

Audit motion usage across a design system by enforcing a 200ms ease-out transition default, prohibiting springy or overshooting curves, and verifying that all components respect the prefers-reduced-motion path for accessibility.

Do not use spring-based micro-interactions when standardizing UI motion to reduce distraction. Prohibit overshooting curves in favor of a predictable 200ms ease-out transition, ensuring safe and accessible motion across the codebase.