Cascade Cards

"use client";

import { Children, type ReactNode } from "react";
import { motion, useReducedMotion } from "motion/react";
import { cn } from "@/lib/utils";

export interface CascadeCardsProps {
  children: ReactNode;
  stagger?: number;
  repeat?: boolean;
  className?: string;
  itemClassName?: string;
}

/** Scroll-triggered cascade: each child drops in from above with a 3D forward tilt and settles with a soft spring, one after another. */
export function CascadeCards({ children, stagger = 0.12, repeat = false, className, itemClassName }: CascadeCardsProps) {
  const reduce = useReducedMotion();
  return (
    <motion.div
      className={cn("[perspective:1200px]", className)}
      initial={reduce ? false : "hidden"}
      whileInView="shown"
      viewport={{ once: !repeat, amount: 0.25 }}
      transition={{ staggerChildren: stagger }}
    >
      {Children.toArray(children).map((c, i) => (
        <motion.div
          key={i}
          className={itemClassName}
          style={{ transformOrigin: "50% 0%" }}
          variants={{
            hidden: { opacity: 0, y: -40, rotateX: 35, scale: 0.94 },
            shown: { opacity: 1, y: 0, rotateX: 0, scale: 1, transition: { type: "spring", stiffness: 140, damping: 16 } },
          }}
        >
          {c}
        </motion.div>
      ))}
    </motion.div>
  );
}

export default CascadeCards;