Empty Photo Gallery
A 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.
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 Photo Gallery
*
* A gallery with nothing saved assembles its own invitation. The frame
* outline draws itself, a sun mark settles inside on a single soft
* spring, then three dashed ghost thumbnails slide up in stagger toAbout this pattern
A gallery with nothing saved has to feel finished, not broken. This belongs on that screen: the photo album with no photos, the gallery grid before the first upload, the shared album waiting for its first picture. The frame draws itself as a path-length tween because an empty state should arrive rather than pop; the sun mark lands on one critically damped spring, the only settle in the file, so it arrives without a wobble; the three dashed ghost thumbnails slide up in stagger on eased tweens, which is how the grid 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.
- Photo gallery
The empty album keeps its grid of placeholder tiles, marked at the photo grid, so a fresh album looks intentional.
- File browser
A thumbnail grid with nothing saved centers the empty mark instead of a blank panel.
Related patterns
- All Caught UpA bell settles, a small badge completes its mark in one stroke, and the list confirms you are current.
- Empty CartThe cart mark drops and settles once, then recently viewed items slide in as the way back to shopping.
- Empty Comments DiscussionA comment-thread empty state assembles itself: a dashed bubble drifts in, an avatar pops into place, skeleton lines draw across, and a caret blinks twice in the empty reply box before the block holds still.