Create First Item
An outlined row fills its slots from the left to show the shape of the thing you have not made yet.
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 { useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Create First Item
*
* An empty list explains itself by showing the shape of what belongs in
* it. A dashed row arrives, its slots fill from the left as if beingAbout this pattern
An empty list that only says "nothing here" leaves the reader to imagine what belongs in it. This one demonstrates instead: a dashed row arrives, its swatch settles and its slot bars grow out from the left as if the row were being written, and the invitation follows once the shape is legible. Pressing the action replaces the outline with a real row in the same grid cell, so the demonstration becomes the result without the list resizing under it. Reduced motion keeps the order — outline, slots, invitation — and drops the growth.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Issue tracker
A new team's issue list shows the outline of a row alongside the action that creates one.
Related patterns
- All Caught UpA bell settles, a small badge completes its mark in one stroke, and the list confirms you are current.
- Empty CartThe cart mark drops and settles once, then recently viewed items slide in as the way back to shopping.
- 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.