Stagger

1"use client"
2 
3import * as React from "react"
4import { motion, useReducedMotion } from "motion/react"
5import type { HTMLMotionProps } from "motion/react"
6 
7type StaggerProps = HTMLMotionProps<"div"> & {
8  delay?: number
9  stagger?: number
10  once?: boolean
11  /** Docs: play on mount instead of waiting for scroll. */
12  preview?: boolean
13}
14 
15export function Stagger({
16  delay = 0,
17  stagger = 0.08,
18  once = true,
19  preview = false,
20  children,
21  ...props
22}: StaggerProps) {
23  const reduce = useReducedMotion()
24 
25  if (reduce) {
26    return (
27      <div {...(props as React.HTMLAttributes<HTMLDivElement>)}>
28        {children as React.ReactNode}
29      </div>
30    )
31  }
32 
33  const transition = {
34    delayChildren: delay,
35    staggerChildren: stagger,
36  }
37 
38  return (
39    <motion.div
40      initial="hidden"
41      {...(preview
42        ? { animate: "show" as const }
43        : {
44            whileInView: "show" as const,
45            viewport: { once, margin: "0px", amount: 0.15 },
46          })}
47      variants={{
48        hidden: {},
49        show: { transition },
50      }}
51      {...props}
52    >
53      {children}
54    </motion.div>
55  )
56}
57 
58type ChildProps = HTMLMotionProps<"div"> & { y?: number }
59 
60export function StaggerChild({ y = 14, children, ...props }: ChildProps) {
61  const reduce = useReducedMotion()
62 
63  if (reduce) {
64    return (
65      <div {...(props as React.HTMLAttributes<HTMLDivElement>)}>
66        {children as React.ReactNode}
67      </div>
68    )
69  }
70 
71  return (
72    <motion.div
73      variants={{
74        hidden: { opacity: 0, y },
75        show: {
76          opacity: 1,
77          y: 0,
78          transition: { duration: 0.26, ease: [0.23, 1, 0.32, 1] },
79        },
80      }}
81      {...props}
82    >
83      {children}
84    </motion.div>
85  )
86}