Empty Calendar
A 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.
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 Calendar
*
* A day with no events arrives as its own invitation. A calendar card
* settles once on a single soft spring, a sun dot climbs along a short
* diagonal over a dashed horizon, and three dashed ghost event chipsAbout this pattern
A day with no events should feel open, not broken. This belongs on the day view before the first meeting is booked, the month grid resting on an empty date, and the shared calendar waiting for its first event. The card lands on one critically damped spring, the only settle in the file, because an empty state should arrive rather than pop; the horizon draws itself as pathLength tweens and the sun climbs on one eased diagonal, which is how the state hints that the day is ahead rather than behind; the three dashed ghost chips rise in stagger on eased tweens, showing where future events 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.
- Calendar
The month grid marks the empty today cell where the first event will land.
- Mobile navigation
The phone calendar tab shows the empty day view where events will appear, marked at the empty pane.
Related patterns
- Open WeekA week with nothing on it: the days arrive, today gets its ring, and a small sun lifts once and holds.
- 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.