Springs

Easing

Layout

Gestures

Scroll

Paths

Controls

direction

staggers

durations

delays

distancepx

Stagger

Reveals its children one after another as they enter the viewport.

Open in v0

$ pnpm dlx shadcn@latest add @tweenly/stagger

import { Stagger } from "@/components/stagger"

export function Demo() {
  return (
    <Stagger
      className="grid grid-cols-3 gap-3"
    >
      {items.map((item) => (
        <Card key={item.id} {...item} />
      ))}
    </Stagger>
  )
}

Updates live as you change the controls. Only non-default props are included.