Stagger

Use it when a group arrives together: a grid of cards, a feature list, a row of stats. The offsets are tens of milliseconds, so the group reads as one gesture, not a queue. Don't stagger content people are waiting to read, like search results or a table that has just loaded. Show those at once.

#Installation

#Usage

Every child gets its own cue. A child that isn't a Reveal is wrapped in one, using the group's variant.

import { Stagger } from '@youj/motion'

export function Features() {
  return (
    <Stagger className="grid grid-cols-3 gap-4">
      <FeatureCard title="Previews" />
      <FeatureCard title="Rollbacks" />
      <FeatureCard title="Analytics" />
    </Stagger>
  )
}

The wrapper is the grid item. Each child sits inside its own div, so a layout class on the child (col-span-2, justify-self-end) no longer reaches the grid: the wrapper is what the grid lays out. Two ways to put it where it counts:

• The same class for every item: itemClassName goes on each wrapper, for example itemClassName="h-full" so the cards fill their cells and match heights.
• A different class per item: wrap that child in a Reveal yourself and give the Reveal the class. A Reveal child isn't wrapped again, so it is the grid item.

<Stagger className="grid grid-cols-3 gap-4" itemClassName="h-full">
  <Reveal className="col-span-2">
    <FeatureCard title="Previews" />
  </Reveal>
  <FeatureCard title="Rollbacks" />
  <FeatureCard title="Analytics" />
</Stagger>

itemClassName goes on the wrappers Stagger makes, not on a Reveal you wrote. Give your own Reveal the classes it needs, h-full included.

A Reveal child keeps its own variant, and its own delay adds to the cue the group gives it. Mix them when one item should arrive differently:

<Stagger step="loose">
  <Reveal as="h2" variant="blur-in">Pricing</Reveal>
  <PlanCard plan="hobby" />
  <PlanCard plan="pro" />
</Stagger>

#Examples

#Reference