Back to Motion Prompt examples
UI component names · #08
Toast notification
A short message appears in a corner and goes away on its own. Clicking "Save" slides a dark notice into the bottom-right corner; when its time bar runs out it slides away.
Opening & overlaystoastsnackbarnotificationalertmessageauto-dismiss
Full motion specification
How the movement works
Use it to confirm a result such as a save or send without interrupting the user.
- 014.5 s cycle on a 542×191 card. The cursor clicks the blue "Save" button (110×36, bottom left) at 1.0 s and leaves to the bottom left.
- 02Toast: #26282c, 214×52, radius 10, 18 px from the right and 16 px from the bottom; slides in 240 px from the right over 1.05–1.4 s with easeOutCubic.
- 03Inside: a white check in a blue circle and white 15 px text "Saved".
- 04A time-left line along the bottom (3 px tall) shrinks linearly from 194 px to 0 over 1.4–3.2 s.
- 05Exit: slides 240 px out to the right over 3.2–3.55 s with easeInOutCubic.
Prompt
After saving, show "Saved" as a toast at the bottom right: slide it in from the right in 0.35 s and dismiss it automatically after 2 s.