Saved Items Empty
A bookmark hangs from its pin and swings once into place, then the copy rises and the shelf 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 · Saved Items Empty
*
* An empty saved-items state: a bookmark ribbon hanging from its pin swings
* once into place with a damped spring, then the headline, the helper line
* and the action button rise and fade in with a stagger. After that theAbout this pattern
An empty saved-items shelf should feel hung, not broken. The bookmark ribbon descends from its pin and swings into place on one damped spring, the headline, the helper line and the action button arrive in a staggered rise after the mark has nearly landed, and then nothing moves again. No looping shimmer, no pulsing placeholder: a finished-looking shelf that tells the visitor their saved things simply have not started arriving yet. Reduced motion keeps the arrival order and drops the swing.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Document page
A read-later shelf shows the settled bookmark with a button that leads back to the library.
- File browser
An empty favorites folder hangs the ribbon above a line explaining where saved items appear.
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.