Empty Cart
The cart mark drops and settles once, then recently viewed items slide in as the way back to shopping.
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 Cart
*
* An empty cart is a shopping session that stalled, so the block spends
* its motion on the way back in. The cart mark drops onto its line and
* settles once, the sentence follows, and the things the shopper wasAbout this pattern
An empty cart is a stalled session rather than a missing feature, so the block spends its motion on the return route. The cart glyph descends and settles a single time, the sentence follows it, and the items the shopper was looking at a moment ago slide in from the right in a short cascade — the direction goods arrive from in a carousel, which is exactly the suggestion being made. Prices travel on tweens and never scale, because a number that bounces reads as a number that changed. Reduced motion keeps the order and drops the travel.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Cart
An empty bag pairs a light mark with a strip of recently viewed products underneath.
Related patterns
- Error RecoveryA failed panel settles without alarm, and the retry glyph turns exactly once per attempt.
- No Results SuggestAn empty result set settles into a quiet mark, then offers queries worth trying instead.
- All Caught UpA bell settles, a small badge completes its mark in one stroke, and the list confirms you are current.