{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "components-logoclouds-logocloud-2",
  "title": "Logo Cloud 2",
  "description": "Animated logo cloud that cycles groups of 3 logos with spring blur transitions.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/components/logoclouds/logocloud-2/index.tsx",
      "content": "'use client';\n\nimport React, { useEffect, useState } from 'react';\nimport { AnimatePresence, motion } from 'motion/react';\n\ninterface LogoItem {\n  name: string;\n  svg: React.ReactNode;\n}\n\ninterface LogoCloudProps {\n  logos: LogoItem[];\n  label?: string;\n  duration?: number;\n}\n\nexport default function LogoCloud({\n  logos,\n  label,\n  duration = 2.5,\n}: LogoCloudProps) {\n  const [currentIndex, setCurrentIndex] = useState(0);\n\n  const groups: LogoItem[][] = [];\n  for (let i = 0; i < logos.length; i += 3) {\n    groups.push(logos.slice(i, i + 3));\n  }\n\n  useEffect(() => {\n    if (groups.length <= 1) return;\n    const interval = setInterval(() => {\n      setCurrentIndex((prev) => (prev + 1) % groups.length);\n    }, duration * 1000);\n    return () => clearInterval(interval);\n  }, [groups.length, duration]);\n\n  const currentGroup = groups[currentIndex] ?? [];\n\n  return (\n    <section className=\"bg-background py-12 w-full\">\n      {label && (\n        <p className=\"text-center text-muted-foreground text-sm tracking-widest uppercase font-light mb-8\">\n          {label}\n        </p>\n      )}\n      <div className=\"mx-auto max-w-5xl px-6\">\n        <div\n          className={`mx-auto grid max-w-2xl items-center gap-8 ${\n            currentGroup.length === 1\n              ? 'grid-cols-1 place-items-center'\n              : currentGroup.length === 2\n                ? 'grid-cols-2'\n                : 'grid-cols-3'\n          }`}\n        >\n          <AnimatePresence initial={false} mode=\"popLayout\">\n            {currentGroup.map((logo, i) => (\n              <motion.div\n                key={`${currentIndex}-${i}`}\n                className=\"flex flex-row items-center justify-center gap-2\"\n                initial={{ opacity: 0, y: 12, filter: 'blur(6px)' }}\n                animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}\n                exit={{ opacity: 0, y: 12, filter: 'blur(6px)', scale: 0.5 }}\n                transition={{\n                  delay: i * 0.1,\n                  duration: 1.5,\n                  type: 'spring',\n                  bounce: 0.2,\n                }}\n              >\n                {logo.svg}\n                <span className=\"text-lg font-semibold text-foreground tracking-tight whitespace-nowrap\">\n                  {logo.name}\n                </span>\n              </motion.div>\n            ))}\n          </AnimatePresence>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/odysseyui/logocloud-2.tsx"
    }
  ],
  "type": "registry:ui"
}