{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "marquee",
  "title": "Marquee",
  "description": "Seamless scrolling loop — horizontal, vertical, hover-pause.",
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/components/velora/marquee.tsx",
      "content": "import { cn } from \"@/lib/utils\";\n\ninterface MarqueeProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Reverse the scroll direction */\n  reverse?: boolean;\n  /** Pause the animation while hovered (it always pauses while focus is inside) */\n  pauseOnHover?: boolean;\n  /** Scroll vertically instead of horizontally */\n  vertical?: boolean;\n  /** Number of content copies (keep >=2 for a seamless loop) */\n  repeat?: number;\n  /** Fade the edges with a mask */\n  fade?: boolean;\n  children: React.ReactNode;\n}\n\nexport function Marquee({\n  className,\n  reverse = false,\n  pauseOnHover = false,\n  vertical = false,\n  repeat = 4,\n  fade = true,\n  children,\n  ...props\n}: MarqueeProps) {\n  return (\n    <div\n      {...props}\n      data-slot=\"marquee\"\n      className={cn(\n        \"group/marquee flex gap-(--gap) overflow-hidden [--duration:40s] [--gap:1rem] motion-reduce:[mask-image:none]\",\n        vertical ? \"flex-col motion-reduce:overflow-y-auto\" : \"flex-row\",\n        fade &&\n          (vertical\n            ? \"[mask-image:linear-gradient(to_bottom,transparent,black_12%,black_88%,transparent)]\"\n            : \"[mask-image:linear-gradient(to_right,transparent,black_12%,black_88%,transparent)]\"),\n        className\n      )}\n    >\n      {Array.from({ length: repeat }).map((_, i) => (\n        <div\n          key={i}\n          aria-hidden={i > 0 || undefined}\n          inert={i > 0 || undefined}\n          className={cn(\n            \"flex shrink-0 justify-around gap-(--gap) group-focus-within/marquee:[animation-play-state:paused]\",\n            vertical\n              ? \"motion-safe:animate-marquee-vertical flex-col\"\n              : \"motion-safe:animate-marquee flex-row motion-reduce:w-full motion-reduce:shrink motion-reduce:flex-wrap motion-reduce:justify-center\",\n            i > 0 && \"motion-reduce:hidden\",\n            reverse && \"[animation-direction:reverse]\",\n            pauseOnHover && \"group-hover/marquee:[animation-play-state:paused]\"\n          )}\n        >\n          {children}\n        </div>\n      ))}\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/velora/marquee.tsx"
    }
  ],
  "cssVars": {
    "theme": {
      "animate-marquee": "marquee var(--duration, 40s) linear infinite",
      "animate-marquee-vertical": "marquee-vertical var(--duration, 40s) 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"
}