{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "sliding-logo-marquee",
  "type": "registry:ui",
  "title": "Infinite Brand Logo Marquee",
  "description": "Seamless hardware-accelerated horizontal brand partner marquee with hover pause.",
  "category": "navigation",
  "dependencies": [
    "@phosphor-icons/react"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "tags": [
    "navigation",
    "marquee",
    "logos",
    "partners"
  ],
  "files": [
    {
      "path": "registry/navigation/sliding-logo-marquee/sliding-logo-marquee.tsx",
      "type": "registry:ui",
      "target": "components/ui/sliding-logo-marquee.tsx",
      "content": "import React from 'react'\nimport { Cpu, Terminal, ShieldCheck, Database, GitBranch, Code, Lightning, Globe } from '@phosphor-icons/react'\nimport { cn } from '@/lib/utils'\n\nexport interface SlidingLogoMarqueeProps {\n  className?: string\n}\n\nexport const SlidingLogoMarquee: React.FC<SlidingLogoMarqueeProps> = ({ className }) => {\n  const items = [\n    { name: 'Next.js 15', icon: <Cpu size={15} /> },\n    { name: 'React 19', icon: <Code size={15} /> },\n    { name: 'Tailwind CSS v4', icon: <Lightning size={15} /> },\n    { name: 'TypeScript 5.7', icon: <ShieldCheck size={15} /> },\n    { name: 'Framer Motion', icon: <Globe size={15} /> },\n    { name: 'Vite 6', icon: <GitBranch size={15} /> },\n    { name: 'Astro', icon: <Terminal size={15} /> },\n    { name: 'Remix', icon: <Database size={15} /> },\n  ]\n\n  return (\n    <div className={cn('relative w-full max-w-3xl overflow-hidden rounded-2xl border border-zinc-200/80 dark:border-white/10 bg-white/70 dark:bg-zinc-950/70 backdrop-blur-md py-2.5', className)}>\n      {/* Gradient edge masks */}\n      <div className=\"pointer-events-none absolute inset-y-0 left-0 w-16 bg-gradient-to-r from-white dark:from-zinc-950 to-transparent z-10\" />\n      <div className=\"pointer-events-none absolute inset-y-0 right-0 w-16 bg-gradient-to-l from-white dark:from-zinc-950 to-transparent z-10\" />\n\n      {/* Marquee Track */}\n      <div className=\"flex w-max gap-3 animate-[marquee_24s_linear_infinite] hover:[animation-play-state:paused]\">\n        {[...items, ...items, ...items].map((item, idx) => (\n          <div\n            key={idx}\n            className=\"flex items-center gap-2 rounded-xl border border-zinc-200/90 dark:border-white/10 bg-zinc-100/90 dark:bg-white/5 px-3 py-1 font-mono text-[11px] text-zinc-700 dark:text-zinc-300 hover:text-indigo-600 dark:hover:text-white hover:border-indigo-400 dark:hover:border-white/25 transition-colors cursor-pointer select-none\"\n          >\n            <span className=\"text-indigo-500 dark:text-emerald-400\">{item.icon}</span>\n            <span className=\"font-semibold\">{item.name}</span>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n"
    }
  ],
  "tailwind": {
    "required": true
  },
  "framework": [
    "react",
    "nextjs",
    "vite"
  ]
}