{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "marquee-demo",
  "type": "registry:example",
  "title": "Marquee Demo",
  "description": "Example showing an infinite scrolling component.",
  "registryDependencies": [
    "@magicui/marquee"
  ],
  "files": [
    {
      "path": "registry/example/marquee-demo.tsx",
      "content": "import { cn } from \"@/lib/utils\"\nimport { Marquee } from \"@/registry/magicui/marquee\"\n\nconst reviews = [\n  {\n    name: \"Jack\",\n    username: \"@jack\",\n    body: \"I've never seen anything like this before. It's amazing. I love it.\",\n    img: \"https://avatar.vercel.sh/jack\",\n  },\n  {\n    name: \"Jill\",\n    username: \"@jill\",\n    body: \"I don't know what to say. I'm speechless. This is amazing.\",\n    img: \"https://avatar.vercel.sh/jill\",\n  },\n  {\n    name: \"John\",\n    username: \"@john\",\n    body: \"I'm at a loss for words. This is amazing. I love it.\",\n    img: \"https://avatar.vercel.sh/john\",\n  },\n  {\n    name: \"Jane\",\n    username: \"@jane\",\n    body: \"I'm at a loss for words. This is amazing. I love it.\",\n    img: \"https://avatar.vercel.sh/jane\",\n  },\n  {\n    name: \"Jenny\",\n    username: \"@jenny\",\n    body: \"I'm at a loss for words. This is amazing. I love it.\",\n    img: \"https://avatar.vercel.sh/jenny\",\n  },\n  {\n    name: \"James\",\n    username: \"@james\",\n    body: \"I'm at a loss for words. This is amazing. I love it.\",\n    img: \"https://avatar.vercel.sh/james\",\n  },\n]\n\nconst firstRow = reviews.slice(0, reviews.length / 2)\nconst secondRow = reviews.slice(reviews.length / 2)\n\nconst ReviewCard = ({\n  img,\n  name,\n  username,\n  body,\n}: {\n  img: string\n  name: string\n  username: string\n  body: string\n}) => {\n  return (\n    <figure\n      className={cn(\n        \"relative h-full w-64 cursor-pointer overflow-hidden rounded-xl border p-4\",\n        // light styles\n        \"border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]\",\n        // dark styles\n        \"dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]\"\n      )}\n    >\n      <div className=\"flex flex-row items-center gap-2\">\n        <img className=\"rounded-full\" width=\"32\" height=\"32\" alt=\"\" src={img} />\n        <div className=\"flex flex-col\">\n          <figcaption className=\"text-sm font-medium dark:text-white\">\n            {name}\n          </figcaption>\n          <p className=\"text-xs font-medium dark:text-white/40\">{username}</p>\n        </div>\n      </div>\n      <blockquote className=\"mt-2 text-sm\">{body}</blockquote>\n    </figure>\n  )\n}\n\nexport default function MarqueeDemo() {\n  return (\n    <div className=\"relative flex w-full flex-col items-center justify-center overflow-hidden\">\n      <Marquee pauseOnHover className=\"[--duration:20s]\">\n        {firstRow.map((review) => (\n          <ReviewCard key={review.username} {...review} />\n        ))}\n      </Marquee>\n      <Marquee reverse pauseOnHover className=\"[--duration:20s]\">\n        {secondRow.map((review) => (\n          <ReviewCard key={review.username} {...review} />\n        ))}\n      </Marquee>\n      <div className=\"from-background pointer-events-none absolute inset-y-0 left-0 w-1/4 bg-gradient-to-r\"></div>\n      <div className=\"from-background pointer-events-none absolute inset-y-0 right-0 w-1/4 bg-gradient-to-l\"></div>\n    </div>\n  )\n}\n",
      "type": "registry:example"
    }
  ]
}