Archive Empty
One fade and a lid settling three pixels onto a box — the least motion a state can have and still arrive.
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 · Archive Empty
*
* The quietest surface in the product, and the brief is restraint: one
* fade, and a lid coming down three pixels onto a box. Nothing draws,
* nothing loops, nothing waits for input. An archive with nothing in itAbout this pattern
The quietest surface in a product, treated as a design constraint rather than an afterthought. The block fades up as one piece, a lid comes down a few pixels onto the box, the words follow, and a hairline closes the paragraph. That is the entire vocabulary: no drawing, no loop, no pulse, nothing waiting to be pressed. An archive with nothing in it is not a problem the reader needs to solve, and every extra movement here would imply otherwise. Reduced motion removes the lid's travel and keeps the fade, which is almost the same state.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Inbox
An empty archive shows a single centred line with no action attached to it.
Related patterns
- Chart No DataThe axes extend from the origin and a flat dashed baseline runs across, so an empty range still looks like a chart.
- Deleted Item TombstoneA removed row leaves a stub holding its slot open, with a hairline showing how long undo is on offer.
- Empty FolderAn empty folder assembles its own invitation: the folder outline draws itself, one dashed ghost sheet rises out of it on a single soft spring and holds still.