{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "marquee",
  "title": "Marquee",
  "author": "andongmin94",
  "description": "A continuously scrolling row for logos, quotes, or featured content.",
  "files": [
    {
      "path": "src/components/ui/marquee.tsx",
      "content": "export default function Marquee({ items }: { items: string[] }) {\n  return (\n    <div className=\"relative flex w-full overflow-x-hidden border-b-2 border-t-2 border-border bg-secondary-background text-foreground font-base\">\n      <div className=\"animate-marquee whitespace-nowrap py-12 motion-reduce:animate-none\">\n        {items.map((item) => {\n          return (\n            <span key={item} className=\"mx-4 text-4xl\">\n              {item}\n            </span>\n          );\n        })}\n      </div>\n\n      <div\n        aria-hidden=\"true\"\n        className=\"absolute top-0 animate-marquee2 whitespace-nowrap py-12 motion-reduce:hidden\"\n      >\n        {items.map((item) => {\n          return (\n            <span key={item} className=\"mx-4 text-4xl\">\n              {item}\n            </span>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui"
    }
  ],
  "cssVars": {
    "theme": {
      "animate-marquee": "marquee 5s linear infinite",
      "animate-marquee2": "marquee2 5s linear infinite"
    }
  },
  "css": {
    "@keyframes marquee": {
      "0%": {
        "transform": "translateX(0%)"
      },
      "100%": {
        "transform": "translateX(-100%)"
      }
    },
    "@keyframes marquee2": {
      "0%": {
        "transform": "translateX(100%)"
      },
      "100%": {
        "transform": "translateX(0%)"
      }
    }
  },
  "docs": "Make sure there is enough content in `items` so it loops perfectly. Visit https://jackwhiting.co.uk/posts/creating-a-marquee-with-tailwind-css to learn more.",
  "categories": [
    "animation",
    "data-display"
  ],
  "type": "registry:ui"
}