{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"logo-marquee","type":"registry:component","title":"Logo Marquee","description":"Duas faixas de logos rolando em sentidos opostos, com fade nas bordas.","author":"UI Catalog <https://ui.codehall.io>","dependencies":["motion"],"registryDependencies":[],"files":[{"path":"components/illustrations/logo-marquee.tsx","type":"registry:component","content":"'use client'\n\nimport { motion } from 'motion/react'\nimport { Boxes, Cloud, Cpu, Globe, Layers, Rocket, Shield, Zap } from 'lucide-react'\n\n// \"Logo Marquee\": duas faixas de logos rolando em sentidos opostos com fade nas bordas.\nconst ROW_A = [\n  ['Vercel', Rocket],\n  ['Stripe', Zap],\n  ['Supabase', Boxes],\n  ['Cloudflare', Cloud],\n  ['Linear', Layers],\n] as const\nconst ROW_B = [\n  ['OpenAI', Cpu],\n  ['Auth0', Shield],\n  ['Resend', Globe],\n  ['Neon', Boxes],\n  ['Clerk', Shield],\n] as const\n\nfunction Row({ items, reverse = false, duration = 28 }: { items: typeof ROW_A | typeof ROW_B; reverse?: boolean; duration?: number }) {\n  const cells = [...items, ...items]\n  return (\n    <div className=\"overflow-hidden\" style={{ maskImage: 'linear-gradient(to right, transparent, #000 15%, #000 85%, transparent)' }}>\n      <motion.div\n        className=\"flex w-max gap-3\"\n        animate={{ x: reverse ? ['-50%', '0%'] : ['0%', '-50%'] }}\n        transition={{ duration, repeat: Infinity, ease: 'linear' }}\n      >\n        {cells.map(([name, Icon], i) => (\n          <div key={`${name}-${i}`} className=\"flex items-center gap-2 rounded-full border bg-card px-4 py-2 text-sm font-medium text-muted-foreground\">\n            <Icon className=\"size-4\" />\n            {name}\n          </div>\n        ))}\n      </motion.div>\n    </div>\n  )\n}\n\nexport default function LogoMarquee() {\n  return (\n    <div className=\"w-full max-w-xl space-y-3 text-foreground\">\n      <Row items={ROW_A} />\n      <Row items={ROW_B} reverse duration={34} />\n    </div>\n  )\n}\n"}]}