Empty Subscriptions
A plan card draws itself, a renewal loop completes once above it, and two ghost rows rise in stagger to show where subscriptions will go.
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 Subscriptions
*
* An empty subscription list assembles its own invitation. A plan
* card draws itself, a renewal loop completes once above it, the
* loop's arrowhead lands on a single soft spring, then two dashedAbout this pattern
A billing screen with no subscriptions should feel settled, not broken. This belongs on that screen: the subscription list with no active plans, the billing tab before the first plan starts, the account screen after every plan has lapsed. The card and the renewal loop draw themselves as pathLength tweens because an empty state should arrive rather than pop; the loop's arrowhead lands on one critically damped spring, the only settle in the file, so the loop closes without a wobble; the two dashed ghost rows rise in stagger on eased tweens, which is how the list hints at its future rows without showing them; and the copy only fades in after the marks are still, 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 subscriptions tab with no plans centers the renewal mark above ghost rows, so the billing screen looks finished.
- Settings
Account settings show the empty renewal state where plan management will live, marked at the empty pane.
Related patterns
- 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.
- Empty Photo GalleryA gallery frame draws itself, a sun mark settles inside on one soft spring, and three dashed ghost thumbnails slide up in stagger to show where the photos will go.
- Empty PlaylistA music note draws itself and lands on one soft spring, a playhead sweeps the empty track slot once, and three ghost rows rise in stagger to show where songs will go.