{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "marquee",
  "type": "registry:ui",
  "title": "Marquee",
  "description": "An infinite, edge-faded horizontal scroller for logos, tags or testimonials. Pauses on hover.",
  "files": [
    {
      "path": "registry/ui/marquee.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\n\nexport interface MarqueeProps {\n  children: React.ReactNode;\n  duration?: number;\n  pauseOnHover?: boolean;\n  className?: string;\n}\n\nexport function Marquee({ children, duration = 24, pauseOnHover = true, className = \"\" }: MarqueeProps) {\n  return (\n    <div\n      className={[\n        \"group w-full overflow-hidden\",\n        \"[mask-image:linear-gradient(90deg,transparent,black_15%,black_85%,transparent)]\",\n        className,\n      ].join(\" \")}\n    >\n      <style>{\"@keyframes nice-marquee{to{transform:translateX(calc(-50% - 6px))}}\"}</style>\n      <div\n        className={[\"flex w-max gap-3\", pauseOnHover ? \"group-hover:[animation-play-state:paused]\" : \"\"].join(\" \")}\n        style={{ animation: \"nice-marquee \" + duration + \"s linear infinite\" }}\n      >\n        {children}\n        <div aria-hidden className=\"contents\">\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n"
    }
  ]
}