{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "logo-cloud",
  "title": "Logo Cloud",
  "description": "An animated logo cloud that cycles through logo sets with staggered scale, opacity, and blur transitions.",
  "files": [
    {
      "path": "registry/custom-ui/logo-cloud.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport interface LogoCloudItem {\n  name: string;\n  src?: string;\n  alt?: string;\n  href?: string;\n  logo?: React.ReactNode;\n  className?: string;\n}\n\nexport interface LogoCloudProps\n  extends Omit<React.ComponentProps<\"div\">, \"children\"> {\n  logos: LogoCloudItem[];\n  setSize?: number;\n  interval?: number;\n  pauseOnHover?: boolean;\n  animateOnView?: boolean;\n  cellClassName?: string;\n  logoClassName?: string;\n  gridClassName?: string;\n}\n\nconst DEFAULT_SET_SIZE = 6;\nconst DEFAULT_INTERVAL = 4000;\nconst DURATION = 500;\nconst STAGGER = 60;\nconst EASE_SCALE_OUT = \"cubic-bezier(0.55, 0, 0.85, 0.15)\";\nconst EASE_SCALE_IN = \"cubic-bezier(0.15, 0.85, 0.35, 1)\";\n\nfunction chunkLogos(logos: LogoCloudItem[], size: number) {\n  if (logos.length <= size) return [logos];\n\n  return Array.from({ length: Math.ceil(logos.length / size) }, (_, index) => {\n    const set = logos.slice(index * size, index * size + size);\n\n    while (set.length < size) {\n      set.push(logos[(index * size + set.length) % logos.length]);\n    }\n\n    return set;\n  });\n}\n\nfunction usePrefersReducedMotion() {\n  const [prefersReducedMotion, setPrefersReducedMotion] = React.useState(false);\n\n  React.useEffect(() => {\n    const query = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n    setPrefersReducedMotion(query.matches);\n\n    const updatePreference = () => setPrefersReducedMotion(query.matches);\n    query.addEventListener(\"change\", updatePreference);\n\n    return () => query.removeEventListener(\"change\", updatePreference);\n  }, []);\n\n  return prefersReducedMotion;\n}\n\nfunction useInView<TElement extends Element>(\n  ref: React.RefObject<TElement | null>,\n  enabled: boolean,\n) {\n  const [isInView, setIsInView] = React.useState(!enabled);\n\n  React.useEffect(() => {\n    const element = ref.current;\n    if (!enabled || !element) {\n      setIsInView(true);\n      return;\n    }\n\n    const observer = new IntersectionObserver(\n      ([entry]) => setIsInView(Boolean(entry?.isIntersecting)),\n      { threshold: 0.3 },\n    );\n\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, [enabled, ref]);\n\n  return isInView;\n}\n\nfunction LogoCloud({\n  className,\n  logos,\n  setSize = DEFAULT_SET_SIZE,\n  interval = DEFAULT_INTERVAL,\n  pauseOnHover = true,\n  animateOnView = true,\n  cellClassName,\n  logoClassName,\n  gridClassName,\n  ...props\n}: LogoCloudProps) {\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  const pausedRef = React.useRef(false);\n  const prefersReducedMotion = usePrefersReducedMotion();\n  const isInView = useInView(rootRef, animateOnView);\n\n  const normalizedSetSize = Math.min(Math.max(1, setSize), logos.length || 1);\n  const sets = React.useMemo(\n    () => chunkLogos(logos, normalizedSetSize),\n    [logos, normalizedSetSize],\n  );\n  const [activeSet, setActiveSet] = React.useState(0);\n\n  React.useEffect(() => {\n    setActiveSet(0);\n  }, [logos, normalizedSetSize]);\n\n  React.useEffect(() => {\n    if (sets.length <= 1 || prefersReducedMotion || !isInView) return;\n\n    const timer = window.setInterval(() => {\n      if (!pausedRef.current) {\n        setActiveSet((currentSet) => (currentSet + 1) % sets.length);\n      }\n    }, interval);\n\n    return () => window.clearInterval(timer);\n  }, [interval, isInView, prefersReducedMotion, sets.length]);\n\n  if (logos.length === 0) return null;\n\n  return (\n    <div\n      ref={rootRef}\n      className={cn(\"w-full overflow-hidden\", className)}\n      data-slot=\"logo-cloud\"\n      onMouseEnter={() => {\n        if (pauseOnHover) pausedRef.current = true;\n      }}\n      onMouseLeave={() => {\n        if (pauseOnHover) pausedRef.current = false;\n      }}\n      {...props}\n    >\n      <div\n        className={cn(\n          \"grid grid-cols-3 gap-10 md:grid-cols-6\",\n          gridClassName,\n        )}\n        data-slot=\"logo-cloud-grid\"\n        role=\"list\"\n      >\n        {Array.from({ length: normalizedSetSize }, (_, position) => (\n          <div\n            className={cn(\n              \"relative flex h-[60px] items-center justify-center overflow-hidden md:h-[80px]\",\n              cellClassName,\n            )}\n            data-slot=\"logo-cloud-cell\"\n            key={position}\n            role=\"listitem\"\n          >\n            {sets.map((set, setIndex) => {\n              const logo = set[position];\n              if (!logo) return null;\n\n              const isActive = setIndex === activeSet;\n\n              return (\n                <LogoCloudLogo\n                  isActive={isActive}\n                  item={logo}\n                  key={`${setIndex}-${logo.name}`}\n                  logoClassName={logoClassName}\n                  position={position}\n                />\n              );\n            })}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nfunction LogoCloudLogo({\n  item,\n  isActive,\n  position,\n  logoClassName,\n}: {\n  item: LogoCloudItem;\n  isActive: boolean;\n  position: number;\n  logoClassName?: string;\n}) {\n  const delay = isActive ? position * STAGGER + DURATION : position * STAGGER;\n  const logo = item.logo ?? (\n    <>\n      {item.src ? (\n        <img\n          alt={item.alt ?? item.name}\n          className={cn(\n            \"max-h-10 w-auto max-w-[110px] object-contain md:max-h-11 md:max-w-[125px]\",\n            logoClassName,\n            item.className,\n          )}\n          loading=\"lazy\"\n          src={item.src}\n        />\n      ) : (\n        <span\n          className={cn(\n            \"truncate text-center text-sm font-semibold tracking-tight text-muted-foreground\",\n            logoClassName,\n            item.className,\n          )}\n        >\n          {item.name}\n        </span>\n      )}\n    </>\n  );\n\n  const content = item.href ? (\n    <a\n      className=\"flex size-full items-center justify-center\"\n      href={item.href}\n      tabIndex={isActive ? undefined : -1}\n    >\n      {logo}\n    </a>\n  ) : (\n    logo\n  );\n\n  return (\n    <div\n      aria-hidden={!isActive}\n      className={cn(\n        \"absolute inset-0 flex items-center justify-center will-change-[opacity,transform,filter]\",\n        !isActive && \"pointer-events-none\",\n      )}\n      data-active={isActive}\n      data-slot=\"logo-cloud-logo\"\n      style={{\n        filter: isActive ? \"blur(0px)\" : \"blur(4px)\",\n        opacity: isActive ? 1 : 0,\n        transform: isActive ? \"scale(1)\" : \"scale(0)\",\n        transitionDelay: `${delay}ms`,\n        transitionDuration: `${DURATION}ms`,\n        transitionProperty: \"opacity, transform, filter\",\n        transitionTimingFunction: isActive ? EASE_SCALE_IN : EASE_SCALE_OUT,\n      }}\n    >\n      {content}\n    </div>\n  );\n}\n\nexport { LogoCloud };\n",
      "type": "registry:ui",
      "target": "components/custom-ui/logo-cloud.tsx"
    }
  ],
  "categories": [
    "marketing",
    "logos"
  ],
  "type": "registry:ui"
}