Motion
Short, interruptible, origin-aware motion, with a reason for every animation.
On this page
Most interfaces animate too much. chatcn animates when something changes state, moves in space or needs to confirm an action, and stays still otherwise.
Rules
- Nothing triggered by the keyboard animates. Neither does anything used a hundred times a day.
- Product UI stays under 300 ms. Exits run at about three quarters of the enter time.
- Things enter from
scale(0.96)and opacity, never from zero, and grow out of their trigger. - Buttons press to
scale(0.97). Hover never scales. - Interactive state uses transitions, so it can reverse halfway. Keyframes are for loops.
- Streaming text appears as it arrives, without per word effects or typewriter delays.
- Reduced motion keeps short fades and removes movement.
Easing
Durations
| Token | Time | Use |
|---|---|---|
press | 100 ms | Press feedback |
tooltip | 125 ms | Tooltips |
fast | 150 ms | Hover color, icon swaps, small fades |
popover | 180 ms | Menus and popovers |
dialog | 220 ms | Dialogs |
panel | 280 ms | Side and artifact panels |
toast | 400 ms | Toasts, deliberately soft |
sheet | 500 ms | Mobile sheets |
Feel it
Pressscale(0.97), 100 ms in, 150 ms out
Copy to checkblur crossfade, 150 ms
Ready
Send to stopsame footprint, 150 ms
Springs
For components that use Motion, the presets are critically damped: snappy 0.3 s, default 0.4 s, layout 0.45 s, all with no bounce. A small bounce is allowed only after a gesture threw the element.