{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-list",
  "type": "registry:ui",
  "title": "Animated List",
  "description": "A list that animates each item in sequence with a delay. Used to showcase notifications or events on your landing page.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/magicui/animated-list.tsx",
      "content": "\"use client\"\n\nimport React, {\n  useEffect,\n  useMemo,\n  useState,\n  type ComponentPropsWithoutRef,\n} from \"react\"\nimport { AnimatePresence, motion, type MotionProps } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport function AnimatedListItem({ children }: { children: React.ReactNode }) {\n  const animations: MotionProps = {\n    initial: { scale: 0, opacity: 0 },\n    animate: { scale: 1, opacity: 1, originY: 0 },\n    exit: { scale: 0, opacity: 0 },\n    transition: { type: \"spring\", stiffness: 350, damping: 40 },\n  }\n\n  return (\n    <motion.div {...animations} layout className=\"mx-auto w-full\">\n      {children}\n    </motion.div>\n  )\n}\n\nexport interface AnimatedListProps extends ComponentPropsWithoutRef<\"div\"> {\n  children: React.ReactNode\n  delay?: number\n}\n\nexport const AnimatedList = React.memo(\n  ({ children, className, delay = 1000, ...props }: AnimatedListProps) => {\n    const [index, setIndex] = useState(0)\n    const childrenArray = useMemo(\n      () => React.Children.toArray(children),\n      [children]\n    )\n\n    useEffect(() => {\n      let timeout: ReturnType<typeof setTimeout> | null = null\n\n      if (index < childrenArray.length - 1) {\n        timeout = setTimeout(() => {\n          setIndex((prevIndex) => (prevIndex + 1) % childrenArray.length)\n        }, delay)\n      }\n\n      return () => {\n        if (timeout !== null) {\n          clearTimeout(timeout)\n        }\n      }\n    }, [index, delay, childrenArray.length])\n\n    const itemsToShow = useMemo(() => {\n      const result = childrenArray.slice(0, index + 1).reverse()\n      return result\n    }, [index, childrenArray])\n\n    return (\n      <div\n        className={cn(`flex flex-col items-center gap-4`, className)}\n        {...props}\n      >\n        <AnimatePresence>\n          {itemsToShow.map((item) => (\n            <AnimatedListItem key={(item as React.ReactElement).key}>\n              {item}\n            </AnimatedListItem>\n          ))}\n        </AnimatePresence>\n      </div>\n    )\n  }\n)\n\nAnimatedList.displayName = \"AnimatedList\"\n",
      "type": "registry:ui"
    }
  ]
}