Motion tokens

Motion tokens define consistent timing values for animations and transitions across your design system. Instead of using arbitrary values like duration-300 or ease-in-out, use semantic tokens that convey meaning.

Motion tokens come in two categories:

• Duration tokens: how long an animation takes
• Easing tokens: how an animation accelerates and decelerates

Duration tokens

Duration selection guide

• Default to quick (200ms) for most UI interactions
• Use instant (100ms) when feedback needs to feel immediate
• Use normal (300ms) for significant state changes users need to notice
• Use slow (500ms) sparingly: only for moments that deserve emphasis

Easing tokens

Easing selection guide

• Default to out-quart for most transitions
• Use out-expo when elements need to "pop" into place
• Use in-quart when elements are leaving or being dismissed
• Use in-out-quart for continuous or looping animations
• Use linear only for progress indicators where a constant rate conveys predictability

Common combinations

Recommended duration + easing pairs for common UI patterns:

Using motion tokens

In CSS

:root {
  --motion-duration-instant: 100ms;
  --motion-duration-quick: 200ms;
  --motion-duration-normal: 300ms;
  --motion-duration-slow: 500ms;

  --motion-easing-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --motion-easing-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-easing-in-quart: cubic-bezier(0.5, 0, 0.75, 0);
  --motion-easing-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --motion-easing-linear: linear;
}

.modal {
  transition: opacity var(--motion-duration-normal) var(--motion-easing-out-expo);
}

In Tailwind CSS

Add to your tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      transitionDuration: {
        'instant': '100ms',
        'quick': '200ms',
        'normal': '300ms',
        'slow': '500ms',
      },
      transitionTimingFunction: {
        'out-quart': 'cubic-bezier(0.25, 1, 0.5, 1)',
        'out-expo': 'cubic-bezier(0.16, 1, 0.3, 1)',
        'in-quart': 'cubic-bezier(0.5, 0, 0.75, 0)',
        'in-out-quart': 'cubic-bezier(0.76, 0, 0.24, 1)',
      },
    },
  },
}

Then use the classes:

  Modal content

MCP tool

AI coding tools retrieve motion tokens via get_motion_tokens.

Parameters:

• category (optional): 'duration', 'easing', or 'all' (default: 'all')
• format (optional): 'tokens', 'css', or 'tailwind' (default: 'tokens')

get_motion_tokens({ category: "duration" })
get_motion_tokens({ category: "easing", format: "css" })
get_motion_tokens({ format: "tailwind" })

Accessibility

Always respect user preferences for reduced motion:

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Or in Tailwind:

  Content

FAQ

Why use semantic tokens instead of arbitrary values?

Semantic tokens like quick and normal communicate intent and ensure consistency. When you see duration-quick, you know it's for UI feedback. When you see duration-300, you have to guess.

How do I choose between out-quart and out-expo?

• out-quart is gentler: good for subtle transitions
• out-expo is snappier: good for elements that need to "pop"

When in doubt, start with out-quart.

What if 200ms feels too slow for my dropdown?

Trust the tokens first. If something feels slow, it might be a perception issue from other factors (layout shift, render delay). If after testing you truly need faster, consider whether instant (100ms) is appropriate for that interaction type.

Can I create custom duration/easing tokens?

Yes, but be deliberate. Every new token adds complexity. Before adding a custom token, ask: "Does this truly represent a new semantic category, or can I use an existing token?"