{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "components-logoclouds-logocloud-5",
  "title": "Logo Cloud 5",
  "description": "CSS marquee logo cloud with configurable direction, speed, gap, and fade edges.",
  "files": [
    {
      "path": "registry/components/logoclouds/logocloud-5/index.tsx",
      "content": "'use client';\n\nimport { cn } from '@/lib/utils';\nimport React from 'react';\n\nconst KEYFRAMES = `\n  @keyframes marquee-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }\n  @keyframes marquee-x-reverse { from { transform: translateX(-50%); } to { transform: translateX(0); } }\n  @keyframes marquee-y { from { transform: translateY(0); } to { transform: translateY(-50%); } }\n  @keyframes marquee-y-reverse { from { transform: translateY(-50%); } to { transform: translateY(0); } }\n`;\n\nconst ANIMATION_NAME: Record<string, string> = {\n  left: 'marquee-x',\n  right: 'marquee-x-reverse',\n  up: 'marquee-y',\n  down: 'marquee-y-reverse',\n};\n\ntype LogoItem = {\n  name: string;\n  svg: React.ReactNode;\n};\n\ntype MarqueeProps = {\n  children: React.ReactNode;\n  duration?: number;\n  pauseOnHover?: boolean;\n  direction?: 'left' | 'right' | 'up' | 'down';\n  gap?: number;\n  fade?: boolean;\n  fadeAmount?: number;\n  className?: string;\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;\n\nexport function Marquee({\n  children,\n  className,\n  duration = 20,\n  pauseOnHover = false,\n  direction = 'left',\n  gap = 32,\n  fade = true,\n  fadeAmount = 10,\n  ...props\n}: MarqueeProps) {\n  const [isPaused, setIsPaused] = React.useState(false);\n  const isVertical = direction === 'up' || direction === 'down';\n  const items = React.Children.toArray(children);\n\n  const maskImage = fade\n    ? isVertical\n      ? `linear-gradient(to bottom, transparent 0%, black ${fadeAmount}%, black ${100 - fadeAmount}%, transparent 100%)`\n      : `linear-gradient(to right, transparent 0%, black ${fadeAmount}%, black ${100 - fadeAmount}%, transparent 100%)`\n    : undefined;\n\n  return (\n    <>\n      <style>{KEYFRAMES}</style>\n      <div\n        className={cn(\n          'flex w-full overflow-hidden',\n          isVertical && 'flex-col',\n          className,\n        )}\n        style={\n          maskImage ? { maskImage, WebkitMaskImage: maskImage } : undefined\n        }\n        onMouseEnter={() => pauseOnHover && setIsPaused(true)}\n        onMouseLeave={() => pauseOnHover && setIsPaused(false)}\n        {...props}\n      >\n        <div\n          className={cn('flex shrink-0', isVertical && 'flex-col')}\n          style={{\n            gap: `${gap}px`,\n            animationName: ANIMATION_NAME[direction],\n            animationDuration: `${duration}s`,\n            animationTimingFunction: 'linear',\n            animationIterationCount: 'infinite',\n            animationPlayState: isPaused ? 'paused' : 'running',\n          }}\n        >\n          {items.map((item, i) => (\n            <div\n              key={`a-${i}`}\n              className={cn('flex shrink-0', isVertical && 'w-full')}\n            >\n              {item}\n            </div>\n          ))}\n          {items.map((item, i) => (\n            <div\n              key={`b-${i}`}\n              aria-hidden\n              className={cn('flex shrink-0', isVertical && 'w-full')}\n            >\n              {item}\n            </div>\n          ))}\n        </div>\n      </div>\n    </>\n  );\n}\n\ntype LogoMarqueeProps = {\n  logos: LogoItem[];\n  label?: string;\n  duration?: number;\n  gap?: number;\n  reverse?: boolean;\n  pauseOnHover?: boolean;\n  fade?: boolean;\n  fadeAmount?: number;\n};\n\nexport default function LogoMarquee({\n  logos,\n  label,\n  duration = 20,\n  gap = 80,\n  reverse = false,\n  pauseOnHover = true,\n  fade = true,\n  fadeAmount = 10,\n}: LogoMarqueeProps) {\n  return (\n    <section className=\"overflow-hidden bg-background py-16\">\n      <div className=\"m-auto max-w-7xl px-6\">\n        {label && (\n          <div className=\"mb-8 flex items-center justify-center\">\n            <p className=\"text-sm text-muted-foreground\">{label}</p>\n          </div>\n        )}\n        <Marquee\n          direction={reverse ? 'right' : 'left'}\n          duration={duration}\n          gap={gap}\n          pauseOnHover={pauseOnHover}\n          fade={fade}\n          fadeAmount={fadeAmount}\n        >\n          {logos.map(({ name, svg }) => (\n            <span key={name} aria-label={name} className=\"flex items-center\">\n              {svg}\n            </span>\n          ))}\n        </Marquee>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/odysseyui/logocloud-5.tsx"
    }
  ],
  "type": "registry:ui"
}