Map Tiles Load
Tiles fade in out of order over the placeholder grid, the way a real map delivers them.
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 { useMemo } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Map Tiles Load
*
* Tiles arrive the way a real map delivers them: out of order, each
* fading over the placeholder grid as its request comes back, with aAbout this pattern
A map does not arrive in reading order — twelve requests go out and twelve come back in whatever order the network decides. Reproducing that is what makes the load feel real: each tile fades over the placeholder grid on its own scattered schedule, with a faint accent edge marking the frame it landed on, and the pin drops only once the last one is in. The order comes from a hash of the tile index rather than a random number, so it is identical on the server and the client and cannot flicker on hydration. Tiles change opacity and nothing else — scaling them would open hairline seams between neighbours. The map itself is built from CSS gradients, so the file carries no asset and no tile server.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Map view
Tiles resolve over a flat placeholder grid in whatever order they come back.
Related patterns
- Lazy Section RevealA below-the-fold section fades and lifts the first time it comes into view, and never again after that.
- Skeleton to ContentBreathing placeholders hand off to the real content in one cross-fade and a small lift.
- Table Rows PopulatePlaceholder cells resolve one column at a time, so the eye follows the fill instead of hunting for it.