Empty Folder
An 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.
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 · Empty Folder
*
* An empty file browser assembles its own invitation. A folder outline
* draws itself, one dashed ghost sheet rises out of the folder on a
* single soft spring and holds still, and the copy fades in after theAbout this pattern
A file browser with nothing in it has to feel finished, not broken. This belongs on that screen: the empty folder, the document list with no files, the attachment well waiting for its first upload. The folder draws itself as a path-length tween because an empty state should arrive rather than pop; the dashed ghost sheet rises out of the folder on one critically damped spring, the only settle in the file, so the ghost lands without a wobble; and the copy only fades in after the marks are still, because words that move read as unfinished work. Under reduced motion the beats keep their order and lose their travel.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- File browser
An empty folder draws its own outline, then one dashed sheet rises out of it and holds still to invite the first file.
- Document page
A document list with nothing saved shows the folder and its rising ghost sheet instead of a blank panel.
Related patterns
- Archive EmptyOne fade and a lid settling three pixels onto a box — the least motion a state can have and still arrive.
- 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.