{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "logo-cloud-marquee",
  "type": "registry:block",
  "title": "Logo Cloud with Marquee",
  "description": "A logo cloud with flowing marquee motion, perfect for bold AI startups.",
  "author": "Ahdeetai <https://aditya.is-cool.dev>",
  "registryDependencies": ["@scrollxui/flowing-logos"],
  "dependencies": ["motion"],
  "files": [
    {
      "type": "registry:component",
      "path": "registry/blocks/logo-cloud/logo-cloud-marquee.tsx",
      "content": "'use client';\n\nimport { motion } from 'motion/react';\nimport { FlowingLogos } from '@/components/ui/flowing-logos';\nimport { cn } from '@/lib/utils';\n\ninterface Logo {\n  name: string;\n  image: string;\n}\n\ninterface LogoCloudMarqueeProps {\n  title?: string;\n  description?: string;\n  data?: Logo[];\n  className?: string;\n}\n\nconst defaultLogos: Logo[] = [\n  { image: 'https://scrollxui.dev/assets/logos/phoenix.svg', name: 'Phoenix' },\n  { image: 'https://scrollxui.dev/assets/logos/oslo.svg', name: 'Oslo' },\n  { image: 'https://scrollxui.dev/assets/logos/theo.svg', name: 'Theo' },\n  { image: 'https://scrollxui.dev/assets/logos/kansas.svg', name: 'Kansas' },\n  { image: 'https://scrollxui.dev/assets/logos/cairo.svg', name: 'Cairo' },\n];\n\nexport default function LogoCloudMarquee({\n  title = 'Built with technologies trusted by',\n  description = 'ScrollX UI aligns with the ecosystem powering the world’s most ambitious products.',\n  data = defaultLogos,\n  className,\n}: LogoCloudMarqueeProps) {\n  const words = title.split(' ');\n\n  return (\n    <section className={cn('relative w-full overflow-hidden py-24', className)}>\n      <div className='mx-auto max-w-6xl px-6'>\n        <h1 className='relative z-10 mx-auto max-w-4xl text-center text-3xl font-bold tracking-tight text-zinc-800 md:text-5xl lg:text-6xl dark:text-zinc-100'>\n          {words.map((word, index) => (\n            <motion.span\n              key={`${word}-${index}`}\n              initial={{ opacity: 0, filter: 'blur(6px)', y: 12 }}\n              whileInView={{ opacity: 1, filter: 'blur(0px)', y: 0 }}\n              viewport={{ once: true }}\n              transition={{\n                duration: 0.4,\n                delay: index * 0.08,\n                ease: 'easeInOut',\n              }}\n              className='mr-2 inline-block'\n            >\n              {word}\n            </motion.span>\n          ))}\n        </h1>\n\n        <motion.p\n          initial={{ opacity: 0 }}\n          whileInView={{ opacity: 1 }}\n          viewport={{ once: true }}\n          transition={{ duration: 0.5, delay: 0.4 }}\n          className='relative z-10 mx-auto mt-6 max-w-2xl text-center text-base text-zinc-500 dark:text-zinc-400 md:text-lg'\n        >\n          {description}\n        </motion.p>\n\n        <motion.div\n          initial={{ opacity: 0, y: 20 }}\n          whileInView={{ opacity: 1, y: 0 }}\n          viewport={{ once: true }}\n          transition={{ duration: 0.5, delay: 0.5 }}\n          className='relative mt-14'\n        >\n          <div className='pointer-events-none absolute inset-y-0 left-0 z-20 w-32 bg-linear-to-r from-white via-white/60 to-transparent dark:from-background dark:via-background/60 dark:to-transparent' />\n          <div className='pointer-events-none absolute inset-y-0 right-0 z-20 w-32 bg-linear-to-l from-white via-white/60 to-transparent dark:from-background dark:via-background/60 dark:to-transparent' />\n          <FlowingLogos\n            data={data}\n            variant='wide'\n            className='[--duration:35s]'\n          />\n        </motion.div>\n      </div>\n    </section>\n  );\n}\n"
    }
  ]
}