Empty Wallet Card
A card outline draws itself, a chip fades in, three dashed number slots grow in stagger, and the add-card action fades in last.
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 Wallet Card
*
* An empty wallet that arrives finished instead of broken. A card
* outline draws itself, a chip fades in, three dashed number slots
* grow in stagger to show where a card number will sit, and theAbout this pattern
A billing screen with no payment method should feel finished, not broken. This belongs on that screen: the billing page before the first card is added, the wallet tab with no stored cards, the checkout step when the wallet is empty. The card outline draws itself as a pathLength tween because an empty state should arrive rather than pop; the chip only fades in once the outline is underway, because a detail should not outrun its frame; the three number slots grow sideways in stagger on eased tweens, which is how the card hints at its number's shape without showing one; and the copy and the action only fade in after the card is legible, because words that move read as unfinished work. 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.
- Billing page
A billing tab with no card centers the drawn card outline above its number slots, so the wallet looks finished.
- Settings
Account settings show the empty wallet card where payment methods will live, marked at the empty pane.
Related patterns
- Empty SubscriptionsA plan card draws itself, a renewal loop completes once above it, and two ghost rows rise in stagger to show where subscriptions will go.
- All Caught UpA bell settles, a small badge completes its mark in one stroke, and the list confirms you are current.
- Empty CalendarA calendar card lands on one soft spring, a sun dot climbs along a short diagonal over a dashed horizon, and three ghost event chips rise in stagger to show where meetings will go.