Stagger

1"use client";
2 
3import type { Variants } from "motion/react";
4import * as m from "motion/react-m";
5import type { CSSProperties, ReactNode } from "react";
6import { feel, staggerItem, viewportOnce } from "@/lib/motion";
7 
8type StaggerProps = {
9  children: ReactNode;
10  className?: string;
11  style?: CSSProperties;
12  /** seconds between each child (LinearStagger — tunable step) */
13  staggerChildren?: number;
14  /** seconds before the first child */
15  delayChildren?: number;
16};
17 
18type StaggerItemProps = {
19  children: ReactNode;
20  className?: string;
21  style?: CSSProperties;
22};
23 
24/**
25 * Staggered children reveal. FLAT exports on purpose — never a compound
26 * `Stagger.Item` (a bolted-on property is undefined across the RSC
27 * client-reference boundary and crashes a Server Component at build).
28 */
29export function Stagger({
30  children,
31  className,
32  style,
33  staggerChildren = feel.stagger,
34  delayChildren = feel.staggerDelay,
35}: StaggerProps) {
36  // Built from props so the step is tunable; defaults reproduce staggerContainer exactly.
37  const container: Variants = {
38    initial: {},
39    animate: { transition: { staggerChildren, delayChildren } },
40  };
41  return (
42    <m.div
43      className={className}
44      style={style}
45      variants={container}
46      initial="initial"
47      whileInView="animate"
48      viewport={viewportOnce}
49    >
50      {children}
51    </m.div>
52  );
53}
54 
55export function StaggerItem({ children, className, style }: StaggerItemProps) {
56  return (
57    <m.div className={className} style={style} variants={staggerItem}>
58      {children}
59    </m.div>
60  );
61}