Motion
Motion explains what changed. It is short, and it can be turned off.
Durations
| Token | Value | Used for |
|---|---|---|
--sui-duration-fast | 120 ms | Hover, press, check marks, color changes |
--sui-duration-base | 200 ms | Switches, segment indicators, menus, tooltips, toasts |
--sui-duration-slow | 320 ms | Sheets, dialogs, sidebar collapse, accordion content |
Easing
One main curve for everything that enters or moves: --sui-ease, cubic-bezier(0.32, 0.72, 0, 1). It starts fast and settles gently. Spinners and skeletons use linear timing.
Try it
Every component on this site is live. Press, hover and tab through them.
Summary
Bookings
Catalog
Schedule
Staff
Motion per component
| Component | Motion | Duration |
|---|---|---|
| Button, Icon Button | Color on hover; darker and scaled to 0.98 while pressed | 120 |
| Checkbox, Radio | Fill and mark appear | 120 |
| Switch | Thumb slides, track changes color | 200 |
| Segmented, Tabs, Dock | The indicator slides to the new selection | 200 to 250 |
| Field, Select | Accent border and focus ring appear | 120 |
| Accordion | Content height grows, chevron turns | 250 |
| Menu, Popover, Tooltip, Command | Fade and scale from 96% | 200 |
| Dialog | Scrim fades, surface scales from 96% | 200 |
| Sheet | Slides in from its edge | 320 |
| Toast | Rises in, fades out | 200 |
| Sidebar | Width changes between 264 and 68 | 250 |
| Progress | Fill grows to the new value | 320 |
Reduced motion
When the user asks for reduced motion, all durations collapse to an instant change and the skeleton pulse stops. No information is carried by motion alone.