Empty Board
Three column outlines draw left to right, one dashed ghost card drops into the first column on a single soft spring, and the add action fades in last.
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 Board
*
* An empty task board shows its own structure before it asks for work.
* Three column outlines draw themselves left to right, one dashed ghost
* card drops into the first column on a single soft spring and holdsAbout this pattern
A task board with nothing on it should still show how it works. This belongs on the new project board, the cleared sprint, the filtered view that matched no cards. The columns draw themselves as staggered path-length tweens, so the structure arrives in reading order before anything asks for input. One dashed ghost card drops into the first column on a critically damped spring, the only spring in the file, to show where work begins without a wobble. The copy and the add action never move; they only fade in once the marks are still. 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.
- Issue tracker
A new board draws its three columns, then one dashed card drops into the first column to show where work begins.
- Dashboard
A cleared sprint shows the empty columns and an add action instead of a blank panel.
Related patterns
- 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.
- 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.