Empty Playlist
A 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.
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 Playlist
*
* An empty queue plays its own invitation. A music note draws itself
* once and lands on a single soft spring, a playhead sweeps the empty
* track slot once, three dashed ghost track rows rise in stagger toAbout this pattern
A queue with no songs should feel inviting, not broken. This belongs on that screen: the playlist tab before the first song is saved, the queue after every track is cleared, the library screen waiting for its first playlist. The music note draws itself as pathLength tweens because an empty state should arrive rather than pop; it lands on one critically damped spring, the only settle in the file, so the mark closes without a wobble; the playhead then sweeps the dashed track slot on one x tween, which is how the slot hints that it is ready without showing content; the three dashed ghost rows rise in stagger on eased tweens, showing where future tracks will sit; 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.
- Media player
The queue screen centers the note above the track slot so an unsaved playlist looks finished.
- Mobile navigation
The phone library tab shows the empty queue where playlists 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 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.