Motion
Short, and only when it explains something. Things enter and leave on a strong ease-out and move on screen on an ease-in-out. A shortcut used a hundred times a day does not animate at all.
Recipes
Five utilities in globals.css. Components carry them already; reach for one only when building something new that floats or presses.
- Press
- motion-press
- 150ms
- Menus and popovers
- motion-popover
- 160ms
- Tooltips
- motion-tooltip
- 125ms
- Dialogs
- motion-dialog
- 220ms
- Sheets
- motion-sheet
- 300ms
Try it
Press the button, open the menu from its trigger, and hover from one tooltip to the next.