{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"veil-logo-cloud-2","type":"registry:block","title":"Logo Cloud 2","description":"Tailark Veil logo-cloud variant 2 block","dependencies":["motion"],"registryDependencies":["@tailark-oss/core-beacon","@tailark-oss/core-bolt","@tailark-oss/core-cisco","@tailark-oss/core-hulu","@tailark-oss/core-spotify","@tailark-oss/core-supabase","@tailark-oss/core-vercel"],"meta":{"aspect-ratio":"45/4","width":686,"height":61},"files":[{"path":"veil/blocks/logo-cloud/two.tsx","type":"registry:component","target":"@components/logo-cloud-2.tsx","content":"'use client'\n\nimport React, { useEffect, useState } from 'react'\nimport { AnimatePresence, motion } from 'motion/react'\n\nimport { Beacon } from '@/components/ui/svgs/beacon'\nimport { Bolt } from '@/components/ui/svgs/bolt'\nimport { Cisco } from '@/components/ui/svgs/cisco'\nimport { Hulu } from '@/components/ui/svgs/hulu'\nimport { SupabaseFull } from '@/components/ui/svgs/supabase'\nimport { VercelFull } from '@/components/ui/svgs/vercel'\nimport { Spotify } from '@/components/ui/svgs/spotify'\n\nconst aiLogos: React.ReactNode[] = [\n    <Bolt\n        key=\"bolt\"\n        className=\"h-3.5 w-full\"\n    />,\n    <Beacon\n        key=\"beacon\"\n        className=\"h-3.5 w-full\"\n    />,\n    <Hulu\n        key=\"hulu\"\n        className=\"h-3.5 w-full\"\n    />,\n]\n\nconst hostingLogos: React.ReactNode[] = [\n    <SupabaseFull\n        key=\"supabase\"\n        className=\"h-5\"\n    />,\n    <Spotify\n        key=\"spotify\"\n        className=\"h-5 w-full\"\n    />,\n    <VercelFull\n        key=\"vercel\"\n        className=\"h-3.5 w-full\"\n    />,\n]\n\nconst paymentsLogos: React.ReactNode[] = [\n    <Hulu\n        key=\"hulu\"\n        className=\"h-3.5 w-full\"\n    />,\n    <VercelFull\n        key=\"vercel\"\n        className=\"h-3.5 w-full\"\n    />,\n    <Spotify\n        key=\"spotify\"\n        className=\"h-5 w-full\"\n    />,\n]\n\nconst streamingLogos: React.ReactNode[] = [\n    <Cisco\n        key=\"cisco\"\n        className=\"h-5 w-full\"\n    />,\n    <Hulu\n        key=\"hulu\"\n        className=\"h-3.5 w-full\"\n    />,\n    <Spotify\n        key=\"spotify\"\n        className=\"h-5 w-full\"\n    />,\n]\n\ntype LogoGroup = 'ai' | 'hosting' | 'payments' | 'streaming'\n\nconst logos: { [key in LogoGroup]: React.ReactNode[] } = {\n    ai: aiLogos,\n    hosting: hostingLogos,\n    payments: paymentsLogos,\n    streaming: streamingLogos,\n}\n\nexport default function LogoCloud() {\n    const [currentGroup, setCurrentGroup] = useState<LogoGroup>('ai')\n\n    useEffect(() => {\n        const interval = setInterval(() => {\n            setCurrentGroup((prev) => {\n                const groups = Object.keys(logos) as LogoGroup[]\n                const currentIndex = groups.indexOf(prev)\n                const nextIndex = (currentIndex + 1) % groups.length\n                return groups[nextIndex]\n            })\n        }, 2500)\n\n        return () => clearInterval(interval)\n    }, [])\n\n    return (\n        <section className=\"bg-background @container py-12\">\n            <div className=\"mx-auto max-w-5xl px-6\">\n                <div className=\"mx-auto grid h-8 max-w-2xl grid-cols-3 items-center gap-8\">\n                    <AnimatePresence\n                        initial={false}\n                        mode=\"popLayout\">\n                        {logos[currentGroup].map((logo, i) => (\n                            <motion.div\n                                key={`${currentGroup}-${i}`}\n                                className=\"**:fill-foreground! flex items-center justify-center\"\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={{ delay: i * 0.1, duration: 1.5, type: 'spring', bounce: 0.2 }}>\n                                {logo}\n                            </motion.div>\n                        ))}\n                    </AnimatePresence>\n                </div>\n            </div>\n        </section>\n    )\n}\n"}]}