Slam List

"use client";

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

export interface SlamListProps {
  /** Each child is slammed in turn. */
  children: ReactNode;
  /** Seconds between items. */
  stagger?: number;
  /** Where items come from. */
  from?: "left" | "right" | "bottom";
  as?: "ul" | "ol" | "div";
  className?: string;
  itemClassName?: string;
  repeat?: boolean;
}

/**
 * Staggered list entrance: each child slams in from off-axis, overshoots with a hard
 * jolt and settles, one after the other. Wraps each child in an item element.
 */
export function SlamList({ children, stagger = 0.09, from = "left", as = "ul", className, itemClassName, repeat = false }: SlamListProps) {
  const reduce = useReducedMotion();
  const List = motion[as];
  const Item = as === "div" ? motion.div : motion.li;

  const offset = from === "bottom" ? { y: 60, x: 0 } : { x: from === "left" ? -80 : 80, y: 0 };
  const item: Variants = {
    hidden: { opacity: 0, ...offset, rotate: from === "right" ? 4 : -4 },
    shown: {
      opacity: 1,
      x: 0,
      y: 0,
      rotate: 0,
      transition: { type: "spring", stiffness: 700, damping: 22, mass: 0.6 },
    },
  };

  return (
    <List
      className={className}
      initial={reduce ? false : "hidden"}
      whileInView="shown"
      viewport={{ once: !repeat, amount: 0.2 }}
      variants={{ hidden: {}, shown: { transition: { staggerChildren: stagger } } }}
    >
      {Children.toArray(children).map((child, i) => (
        <Item key={i} variants={item} className={cn("will-change-transform", itemClassName)}>
          {child}
        </Item>
      ))}
    </List>
  );
}

export default SlamList;