{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "marquee",
  "title": "Marquee",
  "description": "Infinite scrolling marquee component with customizable speed and direction.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/spell-ui/marquee.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface MarqueeProps extends React.HTMLAttributes<HTMLDivElement> {\n  duration?: number;\n  pauseOnHover?: boolean;\n  direction?: \"left\" | \"right\" | \"up\" | \"down\";\n  fade?: boolean;\n  fadeAmount?: number;\n}\n\nexport function Marquee({\n  children,\n  className,\n  duration = 20,\n  pauseOnHover = false,\n  direction = \"left\",\n  fade = true,\n  fadeAmount = 10,\n  ...props\n}: MarqueeProps) {\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const [isPaused, setIsPaused] = React.useState(false);\n\n  const items = React.Children.toArray(children);\n  const isVertical = direction === \"up\" || direction === \"down\";\n\n  return (\n    <>\n      <style jsx>\n        {`\n        @keyframes scroll {\n          from {\n            transform: translateX(0);\n          }\n          to {\n            transform: translateX(-50%);\n          }\n        }\n\n        @keyframes scroll-reverse {\n          from {\n            transform: translateX(-50%);\n          }\n          to {\n            transform: translateX(0);\n          }\n        }\n\n        @keyframes scroll-y {\n          from {\n            transform: translateY(0);\n          }\n          to {\n            transform: translateY(-50%);\n          }\n        }\n\n        @keyframes scroll-y-reverse {\n          from {\n            transform: translateY(-50%);\n          }\n          to {\n            transform: translateY(0);\n          }\n        }\n\n        .marquee-scroller {\n          display: flex;\n          animation: ${\n          isVertical\n            ? (direction === \"up\" ? \"scroll-y\" : \"scroll-y-reverse\")\n            : (direction === \"left\" ? \"scroll\" : \"scroll-reverse\")\n        } ${duration}s linear infinite;\n        }\n\n        .marquee-scroller.paused {\n          animation-play-state: paused;\n        }\n      `}\n      </style>\n      <div\n        ref={containerRef}\n        className={cn(\n          \"flex w-full overflow-hidden\",\n          isVertical && \"flex-col\",\n          className,\n        )}\n        style={{\n          ...(fade && {\n            maskImage: isVertical\n              ? `linear-gradient(to bottom, transparent 0%, black ${fadeAmount}%, black ${\n                100 - fadeAmount\n              }%, transparent 100%)`\n              : `linear-gradient(to right, transparent 0%, black ${fadeAmount}%, black ${\n                100 - fadeAmount\n              }%, transparent 100%)`,\n            WebkitMaskImage: isVertical\n              ? `linear-gradient(to bottom, transparent 0%, black ${fadeAmount}%, black ${\n                100 - fadeAmount\n              }%, transparent 100%)`\n              : `linear-gradient(to right, transparent 0%, black ${fadeAmount}%, black ${\n                100 - fadeAmount\n              }%, transparent 100%)`,\n          }),\n        }}\n        onMouseEnter={() => pauseOnHover && setIsPaused(true)}\n        onMouseLeave={() => pauseOnHover && setIsPaused(false)}\n        {...props}\n      >\n        <div\n          className={cn(\n            \"marquee-scroller flex shrink-0\",\n            isVertical && \"flex-col\",\n            isPaused && \"paused\",\n          )}\n        >\n          {items.map((item, index) => (\n            <div\n              key={`first-${index}`}\n              className={cn(\"flex shrink-0\", isVertical && \"w-full\")}\n            >\n              {item}\n            </div>\n          ))}\n          {items.map((item, index) => (\n            <div\n              key={`second-${index}`}\n              className={cn(\"flex shrink-0\", isVertical && \"w-full\")}\n            >\n              {item}\n            </div>\n          ))}\n        </div>\n      </div>\n    </>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}