Silent Bell
An 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.
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 · Silent Bell
*
* A notification center with nothing to say. A bell icon drifts in,
* a dashed ring draws itself around the bell like the sound of an
* empty room, the copy fades in after the mark is still, and oneAbout this pattern
A notification panel with nothing in it has to feel finished, not broken. This belongs on that screen: the alerts tab, the muted channel, the summary page waiting for its first event. The bell drifts in on an eased tween because arrival is the whole message of an empty state; the dashed ring draws itself around the bell as a path-length tween, 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. One small dot rises from the bell and dissolves, the single notification that never was, so the final composition is an invitation rather than a spinner. Nothing springs and nothing wobbles: quiet on purpose, with every beat 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.
- Notification center
An empty alerts panel draws its own invitation: the bell drops in, a dashed ring draws around it, and one ghost ping rises and dissolves.
- Activity summary
A summary screen with nothing new shows the silent bell instead of an empty list.
Related patterns
- All Caught UpA bell settles, a small badge completes its mark in one stroke, and the list confirms you are current.
- Open WeekA week with nothing on it: the days arrive, today gets its ring, and a small sun lifts once and holds.
- 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.