Empty Comments Discussion
A 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.
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 Comments Discussion
*
* A comment-thread empty state that assembles itself. A dashed
* speech-bubble outline drifts in, an avatar placeholder pops into
* place with one soft settle, two skeleton lines draw in from theAbout this pattern
A comment thread with nothing in it still has to feel like a room that is ready. This belongs on that screen: the thread view, the review pane, the document margin waiting for its first note. The bubble drifts in on a tween and the avatar pops on the one sprung element, because arrival is the whole message of an empty state; the two skeleton lines draw in as eased size changes, which is what a line being laid down really is; and the copy never moves, only fades in afterwards, because words that wobble read as unfinished work. The caret is the only repetition on the page, and it blinks exactly twice before holding still, so the final composition is an invitation rather than a spinner. What keeps it calm is that every beat is a single gesture in a single direction, and then the screen rests. 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.
- Chat thread
A thread with no replies yet assembles its own invitation: dashed bubble, avatar placeholder, drawn lines and an empty reply box.
- Document page
A document's empty comment pane draws the invitation before the first thread appears in the rail.
Related patterns
- Open WeekA week with nothing on it: the days arrive, today gets its ring, and a small sun lifts once and holds.
- Silent BellAn empty notification center assembles its own calm: a bell drifts in, a dashed ring draws around it like the sound of an empty room, and one ghost ping rises and dissolves.
- All Caught UpA bell settles, a small badge completes its mark in one stroke, and the list confirms you are current.