{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "marquee-strip",
  "type": "registry:component",
  "title": "Marquee Strip",
  "description": "A responsive, pauseable content ribbon for statements, logos, and editorial details.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/components/marquee-strip.tsx",
      "type": "registry:component",
      "target": "@ui/marquee-strip.tsx",
      "content": "import type { CSSProperties, ReactNode } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface MarqueeStripProps {\n  children: ReactNode\n  className?: string\n  contentClassName?: string\n  duration?: number\n  direction?: \"left\" | \"right\"\n  repeat?: number\n}\n\nexport function MarqueeStrip({\n  children,\n  className,\n  contentClassName,\n  duration = 28,\n  direction = \"left\",\n  repeat = 2,\n}: MarqueeStripProps) {\n  const copies = Math.max(2, repeat)\n  const trackStyle = {\n    animationDuration: `${duration}s`,\n    animationDirection: direction === \"right\" ? \"reverse\" : \"normal\",\n  } as CSSProperties\n\n  return (\n    <section className={cn(\"group relative overflow-hidden border-y bg-background py-4\", className)} aria-label=\"Scrolling content\">\n      <style>{`@keyframes awwward-marquee-shift { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .awwward-marquee-track { animation-play-state: paused !important; transform: none !important; } }`}</style>\n      <div className=\"flex w-full justify-center overflow-hidden\">\n        <div className={cn(\"awwward-marquee-track flex w-max animate-[awwward-marquee-shift_linear_infinite] group-hover:[animation-play-state:paused] group-focus-within:[animation-play-state:paused]\")}\n          style={trackStyle}\n        >\n          {Array.from({ length: copies }, (_, index) => (\n            <div key={index} aria-hidden={index > 0} className={cn(\"flex shrink-0 items-center gap-8 px-4 text-sm font-medium uppercase tracking-[0.18em] text-muted-foreground\", contentClassName)}>\n              {children}\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  )\n}\n"
    }
  ]
}