Stagger

Lists, grids and table rows appear in a wave, one after another. Pro · 3D and motion › Motion for any component

Lists, grids and tables enter item by item: a column row by row, a grid as a diagonal wave from the first card (or from the middle, the edges, the end), a table row by row with selector="tbody tr". Items further down enter as they scroll in; items added later enter too. Each item moves like Reveal — opacity and translate / scale only, on Web Animations, at the theme's tempo — so cards, rows and buttons inside keep their own styles. Nothing is hidden on the server or with reduced motion.

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add stagger

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { Stagger } from 'valyro-ui-pro';

Props

Prop	Type	Default
`asChild`	`boolean`	`false`	Staggers the items of the only child (a list, a grid, a table) instead of wrapping it in a div.
`selector`	`string`		The items that enter, as a selector inside the container (`tbody tr`). Default: its element children.
`interval`	`number`		Delay between neighbours, ms. Default: the theme's `--ui-motion-stagger`.
`from`	`'start' \| 'center' \| 'end' \| 'random'`		Where the wave starts: the first item, the last, the middle or the edges.
`maxSteps`	`number`		At most this many steps of delay, so a long list doesn't keep its last items waiting.
`preset`	`'fade' \| 'up' \| 'down' \| 'start' \| 'end' \| 'scale' \| 'pop' \| 'flip'`		How the element enters: `up` rises, `fade` only fades, `scale` / `pop` grow, `start` / `end` slide in, `flip` swings up in 3D.
`distance`	`number`		Travel, px. Default: the theme's `--ui-motion-distance`.
`duration`	`number`		Length, ms. Default: the theme's `--ui-motion-enter`.
`delay`	`number`		Wait before entering, ms.
`spring`	`SpringName`		The spring the move follows. Default: the theme's `--ui-motion-spring` (`pop` bounces).
`once`	`boolean`		Enter once (default) or each time the element scrolls back into view.
`amount`	`number`		Visible share that starts the entrance, 0–1.
`margin`	`string`		Grows or shrinks the viewport that counts, like a CSS margin.
`disabled`	`boolean`		Off: the element is simply shown.
`fade`	`boolean`		Fade in while moving (default). `false`: only the move plays and the element keeps its full opacity, so its text is at its final contrast from the first frame (a figure that must stay readable, a `scale` emphasis). The `fade` preset then has nothing left to play.

Related components

Reveal — Reveal any component on scroll: rise, fade in, 3D unfold
Tilt — Tilt, lift, glare and magnetic pull under the cursor for any card
Layout Group — Jump-free reordering: filter, sort, regrid
Presence — Enter and exit: an element stays mounted until its exit animation ends
Scene Backdrop — WebGL or CSS scene behind a regular UI: hero, cards, dashboard
Scroll Cylinder — Headline lines on a rotating cylinder, driven by scroll
Stacking Panels — Panels stick on scroll and pile into a stack
Helix Rail — Cards on a helix that spins with scroll
Scroll Scene — Scroll scene: a pinned screen changes step by step, with a progress rail
Parallax Layers — Depth layers that shift with scroll and cursor
Orbit Showcase — 3D ring of cards: drag with momentum, arrows, keyboard
Coverflow Carousel — 3D product carousel on native scroll: swipe with momentum, arrows, keyboard

Previous: Reveal · Next: Tilt · All 3D and motion