Search for a command to run...
Staggers a list of children into view with a small fade + rise. Use to soften the appearance of newly-streamed or revealed content — search results, profile sections, dashboard tiles.
Each direct child mounts with a 2px rise + opacity fade, staggered by staggerDelay. The wrapper renders a <motion.div> with flex flex-col by default, so the children stack vertically out of the box — override className to change direction or layout.
Welcome back
Three new threads since you last visited.
Up next
Two scheduled posts ready to publish.
On deck
Five drafts waiting on review.
Bump the AnimatedSections key prop to retrigger the stagger on demand — useful when the same content should re-enter after an action (refresh, switching tabs).
AnimatedSections| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Each direct child gets wrapped in its own motion.div and staggered. |
staggerDelay | number | 0.1 | Seconds between each child entering. Drop to 0.04-0.06 for snappy lists; raise to 0.15-0.2 for hero reveals. |
itemDuration | number | 0.2 | Seconds each child takes to settle from opacity: 0, y: 2 to opacity: 1, y: 0. |
className | string | — | Applied to the outer motion.div. Default classes include flex flex-col. |
itemClassName | string | — | Applied to each per-child motion.div wrapper. Useful for shared item padding or per-item gaps. |
Use for content that lands as a group — search results, freshly-streamed sections, dashboard tiles loading in. The stagger draws the eye downward without each item demanding attention.
Override the default flex flex-col for non-vertical layouts (className="grid grid-cols-3 gap-4"). The stagger still works in any layout direction.
Wrap a long list. The stagger keeps adding delay per item — by the 20th child the last section is over a second late. Cap the input to the visible window.
Animate every screen this way. Reserve for landings and reveals — interior navigation feels laggy when every page replay-staggers.