Back to Motion Prompt examples
UI component names · #24
Empty state
The screen shown when there is nothing to list yet. Deleting the two list rows with their trash icons brings up an empty-box drawing, "Nothing here yet" and an "Add" button.
Navigation & statusempty-stateno-datazero-stateblank-stateno-resultsonboarding
Full motion specification
How the movement works
Use it for first-use screens or no-results pages to tell people what to do next.
- 014.5 s cycle on a 542×191 card. A two-row list (494×48, radius 8, a trash icon at the right).
- 02The cursor clicks the trash icons at 0.95 s and 1.65 s. Each row slides 60 px left while fading out over 0.3 s (easeInOutCubic); the second row moves up 58 px into the first slot.
- 03Over 1.95–2.3 s (linear) the empty state fades in while rising 8 px: a blue line drawing of an inbox tray, "Nothing here yet" (16 px, in Japanese) and a blue "Add" button (112×34).
- 04The cursor clicks "Add" at 3.3 s; the empty state fades over 3.25–3.45 s and the two rows come back from the left over 3.35–3.7 s with easeOutCubic.
Prompt
When the list is empty, show an empty state: a line icon, "Nothing here yet" and an add button, fading in over 0.35 s.