Empty Map
A pin outline draws itself over a dashed street grid, drops onto its point on one soft spring, and a ring expands once and fades.
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 Map
*
* A saved-places screen with nothing saved should still read as a map.
* A dashed street grid fades in first, a map-pin outline draws itself,
* the pin drops onto its point on one soft spring, a hairline ringAbout this pattern
A saved-places screen with nothing saved should still read as a map, not as a failed load. Dashed streets fade in first so the pin lands on something, the pin outline draws itself via pathLength, the whole pin drops a short distance on one overdamped spring and stops dead on its point, a hairline ring expands once from the base and fades, and only then does the copy arrive — after which the block holds perfectly still. Nothing pulses or breathes afterwards: anything still moving could be mistaken for places still loading. Reduced motion keeps the arrival order and drops the travel.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Map view
The saved-places tab opens on the pin landing in the middle of the empty grid.
- Onboarding flow
Setup invites a first save; the pin drops once the step renders.
Related patterns
- Archive EmptyOne fade and a lid settling three pixels onto a box — the least motion a state can have and still arrive.
- Chart No DataThe axes extend from the origin and a flat dashed baseline runs across, so an empty range still looks like a chart.
- Deleted Item TombstoneA removed row leaves a stub holding its slot open, with a hairline showing how long undo is on offer.