Inbox Zero
A cleared list comes to rest: a shelf draws out, the mark lands on it, and nothing moves again.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Inbox Zero
*
* A finished state, not a waiting one. A hairline shelf draws out from
* the centre, the tray comes down onto it and stops, and the words fade
* after both have settled. Then nothing moves again — the whole point ofAbout this pattern
The difference between an empty list and a finished one is whether the motion stops. A hairline shelf draws out from its centre, the tray descends onto it and settles once, the words fade in after both are still — and then the block holds, permanently. No breathing placeholder, no drifting mark, nothing that could be mistaken for work still in progress. This is the state a person sees after clearing the last thing in a queue, and it should feel like an ending rather than a pause. Reduced motion keeps the arrival order and drops the travel.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Inbox
An emptied inbox resolves into a still mark and a single line of copy under the filter row.
Related patterns
- Archive EmptyOne fade and a lid settling three pixels onto a box — the least motion a state can have and still arrive.
- Empty Comments DiscussionA comment-thread empty state assembles itself: a dashed bubble drifts in, an avatar pops into place, skeleton lines draw across, and a caret blinks twice in the empty reply box before the block holds still.
- No Results SuggestAn empty result set settles into a quiet mark, then offers queries worth trying instead.