Stagger

Orchestrates staggered entrance animations for child StaggerItem components. Uses framer-motion's staggerChildren variant pattern under the hood.

Terracotta

Oak

Brushed steel

Sage linen

Usage

import { Stagger, StaggerItem, StaggerItemProps, StaggerProps } from "@desk/ui/components/stagger";

Wrap StaggerItem children (not raw elements) — Stagger only drives the hidden→visible variant orchestration; the items own their actual entrance animation.
Tune rhythm with stagger (gap between items) and delay (lead-in) on the parent, rather than hand-setting per-child transition delays.
Needs ReducedMotionProvider in the tree so the orchestrated entrance both runs and honours the reduced-motion setting.

Prop	Type	Default	Description
delay	`number`	`0`	Initial delay before the first child starts animating (seconds).
stagger	`number`	`0.15`	Delay between each child item animating in (seconds).

Prop	Type	Default	Description
animation	`StaggerAnimation`	`"fadeUp"`	Animation preset applied to this item.