{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "marquee",
  "title": "Marquee",
  "description": "Infinite, seamless scrolling row or column of content.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/new-york/marquee/marquee.tsx",
      "content": "\"use client\"\n\nimport { useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface MarqueeProps {\n  children: React.ReactNode\n  /** Seconds for one full loop. Lower = faster. Default: 30 */\n  duration?: number\n  /** Scroll the other way. Default: false */\n  reverse?: boolean\n  /** Scroll vertically instead of horizontally. Default: false */\n  vertical?: boolean\n  /** Pause while hovered. Default: true */\n  pauseOnHover?: boolean\n  /** Gap between items, in px. Default: 16 */\n  gap?: number\n  /** Fade the edges into the background. Default: true */\n  fade?: boolean\n  /** How many copies of the content to render. Increase for short content. Default: 4 */\n  repeat?: number\n  className?: string\n}\n\nexport function Marquee({\n  children,\n  duration = 30,\n  reverse = false,\n  vertical = false,\n  pauseOnHover = true,\n  gap = 16,\n  fade = true,\n  repeat = 4,\n  className,\n}: MarqueeProps) {\n  const reduced = useReducedMotion()\n  const edge = vertical ? \"to bottom\" : \"to right\"\n\n  return (\n    <div\n      className={cn(\n        \"group flex overflow-hidden\",\n        vertical ? \"flex-col\" : \"flex-row\",\n        className\n      )}\n      style={\n        {\n          gap,\n          \"--mc-gap\": `${gap}px`,\n          // Alpha mask for edge fading, not a color gradient\n          maskImage: fade\n            ? `linear-gradient(${edge}, transparent, #000 12%, #000 88%, transparent)`\n            : undefined,\n        } as React.CSSProperties\n      }\n    >\n      {Array.from({ length: repeat }, (_, i) => (\n        <div\n          key={i}\n          aria-hidden={i > 0}\n          className={cn(\n            \"flex shrink-0 justify-around\",\n            vertical ? \"flex-col\" : \"flex-row\",\n            pauseOnHover && \"group-hover:[animation-play-state:paused]\"\n          )}\n          style={{\n            gap,\n            animation: reduced\n              ? undefined\n              : `${vertical ? \"mc-marquee-y\" : \"mc-marquee-x\"} ${duration}s linear infinite${reverse ? \" reverse\" : \"\"}`,\n          }}\n        >\n          {children}\n        </div>\n      ))}\n      <style>{`\n        @keyframes mc-marquee-x { to { transform: translateX(calc(-100% - var(--mc-gap))) } }\n        @keyframes mc-marquee-y { to { transform: translateY(calc(-100% - var(--mc-gap))) } }\n      `}</style>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "docs": "Docs, live playground and every prop: https://trytweenly.vercel.app/docs/components/marquee",
  "type": "registry:component"
}