Animated List

1"use client";
2 
3import { AnimatePresence, motion, useReducedMotion } from "motion/react";
4import { Children, useEffect, useState, type ReactNode } from "react";
5import { cn } from "@/lib/utils";
6 
7interface AnimatedListProps {
8  /** One entry per child, emitted in order. */
9  children: ReactNode;
10  /** Milliseconds between entries arriving. */
11  delay?: number;
12  /** How many entries stay on screen before the oldest is dropped. */
13  max?: number;
14  /** Start over once the last child has been emitted. */
15  loop?: boolean;
16  /** Announce arrivals to screen readers, for genuinely live content. */
17  live?: boolean;
18  className?: string;
19}
20 
21/**
22 * A feed where entries arrive one at a time, pushing the ones already there
23 * down and out of the bottom of the list.
24 *
25 * Only `max` entries are mounted at once, so a feed that has been running for
26 * an hour costs exactly what it did in its first second. The shuffle is a
27 * layout animation rather than hand-computed offsets: each surviving entry
28 * animates from wherever it was to wherever the new arrival pushed it.
29 *
30 * Nothing here is real notification content — if you wire it to some, turn on
31 * `live` so the arrivals are announced rather than appearing silently.
32 */
33export function AnimatedList({
34  children,
35  delay = 1400,
36  max = 4,
37  loop = true,
38  live = false,
39  className = "",
40}: AnimatedListProps) {
41  const entries = Children.toArray(children);
42  const prefersReducedMotion = useReducedMotion();
43  // Total emitted so far. The newest entry is always `emitted - 1`, which
44  // makes it its own stable key however many laps the list has run.
45  const [emitted, setEmitted] = useState(1);
46 
47  const finished = !loop && emitted >= entries.length;
48 
49  useEffect(() => {
50    if (entries.length === 0 || finished || prefersReducedMotion) return;
51    const timer = setTimeout(() => setEmitted((count) => count + 1), delay);
52    return () => clearTimeout(timer);
53  }, [emitted, delay, entries.length, finished, prefersReducedMotion]);
54 
55  if (entries.length === 0) return null;
56 
57  // Reduced motion gets the finished list, not a silent animation: the point
58  // of the component is the arrival, and there is no quiet way to show it.
59  const visibleEntries = prefersReducedMotion
60    ? entries.slice(0, max).map((node, position) => ({ key: position, node }))
61    : Array.from(
62        { length: Math.min(emitted, max, entries.length) },
63        (_, position) => {
64          const sequence = emitted - 1 - position;
65// … truncated