Stagger

Linear stagger — children rise into view in sequence with a tunable per-child step.

First to rise.

Then this one.

Last, a beat later.

Installation

One command drops the source into your repo — editable, with the provider and motion pulled in automatically.

npx shadcn add https://motion.asmitsah.dev/r/stagger.json

PrerequisiteInstall the provider base first

This component imports from @/lib/motion and needs <MotionProvider> mounted in your root layout — install the base once, before copying this component.

npx shadcn add https://motion.asmitsah.dev/r/provider.json

Step 1Install the runtime dependency

npm install motion

Step 2Copy the source into components/motion/stagger.tsx

components/motion/stagger.tsx

"use client";

import type { Variants } from "motion/react";
import * as m from "motion/react-m";
import type { CSSProperties, ReactNode } from "react";
import { feel, staggerItem, viewportOnce } from "@/lib/motion";

type StaggerProps = {
  children: ReactNode;
  className?: string;
  style?: CSSProperties;
  /** seconds between each child (LinearStagger — tunable step) */
  staggerChildren?: number;
  /** seconds before the first child */
  delayChildren?: number;
};

type StaggerItemProps = {
  children: ReactNode;
  className?: string;
  style?: CSSProperties;
};

/**
 * Staggered children reveal. FLAT exports on purpose — never a compound
 * `Stagger.Item` (a bolted-on property is undefined across the RSC
 * client-reference boundary and crashes a Server Component at build).
 */
export function Stagger({
  children,
  className,
  style,
  staggerChildren = feel.stagger,
  delayChildren = feel.staggerDelay,
}: StaggerProps) {
  // Built from props so the step is tunable; defaults reproduce staggerContainer exactly.
  const container: Variants = {
    initial: {},
    animate: { transition: { staggerChildren, delayChildren } },
  };
  return (
    <m.div
      className={className}
      style={style}
      variants={container}
      initial="initial"
      whileInView="animate"
      viewport={viewportOnce}
    >
      {children}
    </m.div>
  );
}

export function StaggerItem({ children, className, style }: StaggerItemProps) {
  return (
    <m.div className={className} style={style} variants={staggerItem}>
      {children}
    </m.div>
  );
}

Usage

Basic

Wrap a list with Stagger and each direct StaggerItem rises in sequence, once, on scroll into view.

import { Stagger, StaggerItem } from "@/components/motion/stagger";

<Stagger className="flex flex-col gap-3">
  <StaggerItem>First</StaggerItem>
  <StaggerItem>Second</StaggerItem>
  <StaggerItem>Third</StaggerItem>
</Stagger>

Grid

Works over any layout — className passes through, so a grid staggers just as well as a stack.

<Stagger className="grid grid-cols-3 gap-4">
  <StaggerItem>Card A</StaggerItem>
  <StaggerItem>Card B</StaggerItem>
  <StaggerItem>Card C</StaggerItem>
</Stagger>

Custom cadence

Slow the step and add a lead delay to make a longer list read more deliberately.

<Stagger staggerChildren={0.12} delayChildren={0.2} className="flex flex-col gap-3">
  <StaggerItem>Slower</StaggerItem>
  <StaggerItem>Cadence</StaggerItem>
  <StaggerItem>Between items</StaggerItem>
</Stagger>

Props

Prop	Type	Default	Description
children	ReactNode	—	StaggerItem children — each rises in sequence.
className	string	—	Passed straight through — Stagger becomes your list/grid container.
style	CSSProperties	—	Inline style passthrough.
staggerChildren	number	feel.stagger (0.08)	Seconds between each child's animation start.
delayChildren	number	feel.staggerDelay (0.05)	Seconds before the first child animates.

StaggerItem

Prop	Type	Default	Description
children	ReactNode	—	Content for this one item.
className	string	—	Passed straight through to the item element.
style	CSSProperties	—	Inline style passthrough.