What will live here
- →The four canonical durations: 120ms (micro-interaction), 200ms (state change), 300ms (reveal), 500ms (page transition)
- →Easing tokens — ease-out-quart for entrances, ease-in-out for transforms, no bounce or elastic ever
- →Reduced-motion handling — what we cut and what we keep
- →Patterns: list-row hover, modal enter/exit, copy-button success state, async result reveals
In the meantime
Use Tailwind's transition-colors, transition-opacity, and transition-transform with duration-150 / 200 / 300 sparingly. Avoid animating layout properties — transform and opacity only.
Want to help
Drop a Figma frame, a production link, or a usage example in the relevant Slack thread and we'll roll it into this page.