Staggered List Entrance
Rows fade and lift into place about fifty milliseconds apart, top to bottom.
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 { Children } from "react";
import type { ReactNode } from "react";
import { motion, stagger, useReducedMotion } from "motion/react";
import type { Variants } from "motion/react";
/**
* Vibary · Staggered List Entrance
*About this pattern
What a freshly fetched list should feel like. Each row fades in and lifts a few pixels, offset from the one above it by around fifty milliseconds — long enough for the eye to read a direction of travel, short enough that the whole group has settled well inside a second. The offset also gives the eye somewhere to land: it starts at the first row instead of taking in a wall of items that all appeared at once. Rows travel on a near-critically-damped spring, because anything springier turns text into jelly.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Issue tracker
Restrained sequencing as rows settle after a page loads.
Related patterns
- Optimistic Row InsertThe new entry lands at half opacity the instant it is asked for, then firms up when the server agrees.
- File Upload ProgressA file row's bar fills as bytes land while the percentage and the counter roll with it.
- Spinner to CheckThe waiting arc finishes its turn, closes into a full ring, and the confirming stroke lands inside it.