Stagger Fade

"use client";

import { Children, type ReactNode } from "react";
import { motion, useReducedMotion } from "motion/react";

export interface StaggerFadeProps {
  children: ReactNode;
  stagger?: number;
  className?: string;
  itemClassName?: string;
}

/** The quietest entrance: list items simply fade in one after another (no movement), 60ms apart, when the list enters the viewport. */
export function StaggerFade({ children, stagger = 0.06, className, itemClassName }: StaggerFadeProps) {
  const reduce = useReducedMotion();
  return (
    <motion.ul
      className={className}
      initial={reduce ? false : "hidden"}
      whileInView="shown"
      viewport={{ once: true, amount: 0.2 }}
      variants={{ hidden: {}, shown: { transition: { staggerChildren: stagger } } }}
    >
      {Children.toArray(children).map((c, i) => (
        <motion.li
          key={i}
          className={itemClassName}
          variants={{ hidden: { opacity: 0 }, shown: { opacity: 1, transition: { duration: 0.5, ease: "linear" } } }}
        >
          {c}
        </motion.li>
      ))}
    </motion.ul>
  );
}

export default StaggerFade;