Motion
Popups & notifications
Everything that opens over the page arrives from the thing that opened it, quickly, and leaves faster. Open each one below.
Timing
| What opens | Movement | Timing | Notes |
|---|---|---|---|
| Dropdown, menu, popover | y −6 → 0 · scale .97 → 1 · fade | 0.3s power3.out | Opens up when there is no room below |
| Tooltip | y ±4 → 0 · fade | 0.2s power3.out | After a 400ms rest; hover or focus only |
| Command palette | y −16 → 0 · scale .98 → 1 · fade | 0.35s power3.out | ⌘K anywhere |
| Dialog | backdrop fade 0.3s · sheet y 40 · scale .98 | 0.5s power4.out | Rows rise in after it, 40ms apart |
| Drawer | backdrop fade 0.3s · panel from the right edge | 0.55s power4.out | Phone: a bottom sheet |
| Toast | in: y 20 → 0 · scale .96 → 1 · out: y 12 · scale .97 (0.25s power3.in) | 0.45s power4.out | 4s on screen (7s for errors), paused while hovered |
| Notification bell | the list opens like a dropdown | 0.3s power3.out | The unread dot goes once everything is read |
Dropdowns & menus
Overlays
Notifications
Toasts confirm what just happened and offer the way back. They stack at the bottom, newest on top, four at most.