All Caught Up
A bell settles, a small badge completes its mark in one stroke, and the list confirms you are current.
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 · All Caught Up
*
* Confirmation without celebration. The bell settles, a small badge
* appears at its shoulder and completes its mark in one stroke, and the
* sentence follows. The mark is drawn in the inherited text color ratherAbout this pattern
Confirmation without celebration. The bell descends and settles once — no swing, because a ringing bell would contradict the sentence underneath it — then a badge appears at its shoulder and completes its mark in a single stroke. The mark is drawn in the inherited text color rather than a state color, and nothing bursts, flashes or scales: being up to date is an ordinary condition, and an empty notification list that congratulates the reader wears thin by the third visit that day. Reduced motion shows the completed badge with no stroke and no travel.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Notification center
An emptied notification inbox shows a small mark and a line saying there is nothing left.
Related patterns
- 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.
- 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.