{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "logo-loop-demo",
  "title": "Logo Timeline Demo 2",
  "description": "A looping logo marquee component with horizontal and vertical motion, hover effects, fading edges, and responsive behavior.",
  "registryDependencies": [
    "@gammaui/logo-loop"
  ],
  "files": [
    {
      "path": "registry/example/logo-loop-demo.tsx",
      "content": "import {\n  IconBrandAndroid,\n  IconBrandApple,\n  IconBrandAws,\n  IconBrandCss3,\n  IconBrandDocker,\n  IconBrandFigma,\n  IconBrandFirebase,\n  IconBrandGithub,\n  IconBrandGitlab,\n  IconBrandGoogle,\n  IconBrandHtml5,\n  IconBrandJavascript,\n  IconBrandNextjs,\n  IconBrandNodejs,\n  IconBrandReact,\n  IconBrandStripe,\n  IconBrandSupabase,\n  IconBrandTailwind,\n  IconBrandTypescript,\n  IconBrandVercel,\n} from \"@tabler/icons-react\"\n\nimport { LogoLoop } from \"@/registry/gammaui/logo-loop\"\n\nconst techLogos = [\n  {\n    node: <IconBrandReact size={48} />,\n    title: \"React\",\n    href: \"https://react.dev\",\n  },\n  {\n    node: <IconBrandNextjs size={48} />,\n    title: \"Next.js\",\n    href: \"https://nextjs.org\",\n  },\n  {\n    node: <IconBrandTypescript size={48} />,\n    title: \"TypeScript\",\n    href: \"https://www.typescriptlang.org\",\n  },\n  {\n    node: <IconBrandTailwind size={48} />,\n    title: \"Tailwind CSS\",\n    href: \"https://tailwindcss.com\",\n  },\n\n  // --- Added Logos ---\n  {\n    node: <IconBrandVercel size={48} />,\n    title: \"Vercel\",\n    href: \"https://vercel.com\",\n  },\n  {\n    node: <IconBrandNodejs size={48} />,\n    title: \"Node.js\",\n    href: \"https://nodejs.org\",\n  },\n  {\n    node: <IconBrandGithub size={48} />,\n    title: \"GitHub\",\n    href: \"https://github.com\",\n  },\n  {\n    node: <IconBrandGitlab size={48} />,\n    title: \"GitLab\",\n    href: \"https://gitlab.com\",\n  },\n  {\n    node: <IconBrandDocker size={48} />,\n    title: \"Docker\",\n    href: \"https://www.docker.com\",\n  },\n  {\n    node: <IconBrandJavascript size={48} />,\n    title: \"JavaScript\",\n    href: \"https://developer.mozilla.org/en-US/docs/Web/JavaScript\",\n  },\n  {\n    node: <IconBrandHtml5 size={48} />,\n    title: \"HTML5\",\n    href: \"https://developer.mozilla.org/en-US/docs/Web/HTML\",\n  },\n  {\n    node: <IconBrandCss3 size={48} />,\n    title: \"CSS3\",\n    href: \"https://developer.mozilla.org/en-US/docs/Web/CSS\",\n  },\n  {\n    node: <IconBrandFigma size={48} />,\n    title: \"Figma\",\n    href: \"https://figma.com\",\n  },\n  {\n    node: <IconBrandAws size={48} />,\n    title: \"Amazon AWS\",\n    href: \"https://aws.amazon.com\",\n  },\n  {\n    node: <IconBrandGoogle size={48} />,\n    title: \"Google\",\n    href: \"https://google.com\",\n  },\n  {\n    node: <IconBrandStripe size={48} />,\n    title: \"Stripe\",\n    href: \"https://stripe.com\",\n  },\n  {\n    node: <IconBrandFirebase size={48} />,\n    title: \"Firebase\",\n    href: \"https://firebase.google.com\",\n  },\n  {\n    node: <IconBrandSupabase size={48} />,\n    title: \"Supabase\",\n    href: \"https://supabase.com\",\n  },\n  {\n    node: <IconBrandApple size={48} />,\n    title: \"Apple\",\n    href: \"https://apple.com\",\n  },\n  {\n    node: <IconBrandAndroid size={48} />,\n    title: \"Android\",\n    href: \"https://www.android.com\",\n  },\n]\n\nexport function LogoLoopDemo() {\n  return (\n    <div style={{ height: \"200px\", position: \"relative\", overflow: \"hidden\" }}>\n      <LogoLoop\n        logos={techLogos}\n        speed={50}\n        direction=\"left\"\n        gap={80}\n        hoverSpeed={0}\n        scaleOnHover\n        fadeOut\n        ariaLabel=\"Technology partners\"\n      />\n    </div>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}