{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "marquee",
  "title": "Marquee",
  "description": "An infinite scrolling component that can be used to display text, images, or videos.",
  "files": [
    {
      "path": "registry/tealmac/marquee.tsx",
      "content": "import { type ComponentPropsWithoutRef } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface MarqueeProps extends ComponentPropsWithoutRef<\"div\"> {\n  className?: string\n  /** Reverse the scroll direction. */\n  reverse?: boolean\n  /** Pause while the pointer is over the marquee. */\n  pauseOnHover?: boolean\n  children: React.ReactNode\n  /** Scroll vertically instead of horizontally. */\n  vertical?: boolean\n  /** How many copies of the content to render for a seamless loop. */\n  repeat?: number\n}\n\n/**\n * Marquee renders a seamless, infinitely scrolling track. The content is\n * rendered `repeat` times and translated by one full copy via the\n * `animate-marquee` keyframes, producing a continuous loop in either axis.\n */\nexport function Marquee({\n  className,\n  reverse = false,\n  pauseOnHover = false,\n  children,\n  vertical = false,\n  repeat = 4,\n  ...props\n}: MarqueeProps) {\n  const copies = Array.from({ length: Math.max(1, repeat) })\n\n  return (\n    <div\n      {...props}\n      data-orientation={vertical ? \"vertical\" : \"horizontal\"}\n      className={cn(\n        \"group flex gap-(--gap) overflow-hidden p-2 [--duration:40s] [--gap:1rem]\",\n        vertical ? \"flex-col\" : \"flex-row\",\n        className\n      )}\n    >\n      {copies.map((_, i) => (\n        <div\n          key={i}\n          aria-hidden={i > 0}\n          inert={i > 0 ? true : undefined}\n          className={cn(\n            \"flex shrink-0 justify-around gap-(--gap)\",\n            vertical\n              ? \"animate-marquee-vertical flex-col motion-reduce:animate-none\"\n              : \"animate-marquee flex-row motion-reduce:animate-none\",\n            pauseOnHover && \"group-hover:[animation-play-state:paused]\",\n            reverse && \"[animation-direction:reverse]\"\n          )}\n        >\n          {children}\n        </div>\n      ))}\n    </div>\n  )\n}\n\nexport default Marquee\n",
      "type": "registry:ui"
    }
  ],
  "cssVars": {
    "theme": {
      "animate-marquee": "marquee var(--duration) infinite linear",
      "animate-marquee-vertical": "marquee-vertical var(--duration) linear infinite"
    }
  },
  "css": {
    "@keyframes marquee": {
      "from": {
        "transform": "translateX(0)"
      },
      "to": {
        "transform": "translateX(calc(-100% - var(--gap)))"
      }
    },
    "@keyframes marquee-vertical": {
      "from": {
        "transform": "translateY(0)"
      },
      "to": {
        "transform": "translateY(calc(-100% - var(--gap)))"
      }
    }
  },
  "type": "registry:ui"
}