motion-design

Standardize UI animation tokens by defining token-based easings, durations, and stagger patterns for page transitions. This approach applies across React, Svelte, and Vue, preventing inconsistent hardcoded values and ensuring consistent motion specs.

To make UI motion respect prefers-reduced-motion, mandate compliant fallback behavior across all interactive states. This ensures accessible animation behavior by providing safe transitions for hover, active, focus, and disabled interactions.

Set up entrance and exit choreography by using token-based durations and easings rather than raw milliseconds. This standardizes animation timing across your component UIs and prevents janky, inconsistent motion design.

This UI motion approach does not require a specific animation library, using existing motion libraries only when already present. It standardizes easings and transitions around your existing token system rather than adding new dependencies.

You can use token-based easings for scroll-driven reveals, layout transitions, counters, and tickers. The system provides default crossfade and slide approaches along with guidance for these advanced motion motifs.