Animated List

1"use client"
2 
3import * as React from "react"
4import { AnimatePresence, motion, useReducedMotion } from "motion/react"
5import { cn } from "@/lib/utils"
6 
7export interface AnimatedListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
8  /** Each child renders as one list item — every child must carry a stable `key`. */
9  children: React.ReactNode
10  /** Stagger (ms) applied to each item's entrance delay on first mount; items added later pop in immediately with no extra delay. */
11  stagger?: number
12}
13 
14/**
15 * A layout-animated flex column: items stagger in on first mount, items
16 * added later pop in on their own (no extra delay), removed items fade out
17 * while the remaining items smoothly re-flow into place. No visual
18 * opinion of its own — the animation choreography is the whole point.
19 */
20export const AnimatedList = React.forwardRef<HTMLDivElement, AnimatedListProps>(
21  ({ children, stagger = 80, className, ...props }, ref) => {
22    const reduced = useReducedMotion()
23    const mounted = React.useRef(false)
24 
25    React.useEffect(() => {
26      mounted.current = true
27    }, [])
28 
29    return (
30      <div className={cn("flex flex-col gap-2", className)} ref={ref} {...props}>
31        <AnimatePresence initial={!reduced} mode="popLayout">
32          {React.Children.map(children, (child, index) => {
33            if (!React.isValidElement(child)) return null
34            const key = child.key ?? index
35            // only the first batch (mounted still false) staggers by index; anything added later has delay 0 and pops in at once
36            const delay = mounted.current ? 0 : (index * stagger) / 1000
37 
38            return (
39              <motion.div
40                animate={{ opacity: 1, y: 0, scale: 1 }}
41                exit={
42                  reduced
43                    ? { opacity: 0, transition: { duration: 0 } }
44                    : { opacity: 0, y: 12, scale: 0.97, transition: { duration: 0.2, ease: "easeIn" } }
45                }
46                initial={reduced ? false : { opacity: 0, y: 12, scale: 0.97 }}
47                key={key}
48                layout={!reduced}
49                transition={reduced ? { duration: 0 } : { type: "spring", stiffness: 300, damping: 26, delay }}
50              >
51                {child}
52              </motion.div>
53            )
54          })}
55        </AnimatePresence>
56      </div>
57    )
58  },
59)
60 
61AnimatedList.displayName = "AnimatedList"
62 
63export default AnimatedList