{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "logo-cloud-04",
  "description": "A logo cloud with motion.",
  "dependencies": [
    "motion/react"
  ],
  "files": [
    {
      "path": "registry/blocks/logo-cloud-04/page.tsx",
      "content": "import { LogoCarousel } from \"@/registry/blocks/logo-cloud-04/components/logo-cloud-04\"\n\n// ensure to make equal number of logos\nexport function LogoCloud04() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-3xl\">\n        <section\n          id=\"clients\"\n          className=\"mx-auto max-w-7xl px-6 text-center md:px-8\"\n        >\n          <div className=\"py-14\">\n            <div className=\"mx-auto max-w-screen-xl px-4 md:px-8\">\n              <h2 className=\"text-center text-sm font-semibold text-gray-600\">\n                TRUSTED BY TEAMS FROM AROUND THE WORLD\n              </h2>\n              <LogoCarousel columns={3} />\n            </div>\n          </div>\n        </section>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/logo-cloud/page.tsx"
    },
    {
      "path": "registry/blocks/logo-cloud-04/components/logo-cloud-04.tsx",
      "content": "\"use client\"\n\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport { AnimatedLogoColumn, type Logo } from \"./animated-logo-column\"\n\nconst LOGOS: Logo[] = [\n  {\n    id: 1,\n    name: \"Google\",\n    src: \"https://pub-b3533f2e1c954842824758490b95c9d5.r2.dev/Google.svg\",\n  },\n  {\n    id: 2,\n    name: \"GitHub\",\n    src: \"https://pub-b3533f2e1c954842824758490b95c9d5.r2.dev/GitHub.svg\",\n  },\n  {\n    id: 3,\n    name: \"Amazon\",\n    src: \"https://pub-b3533f2e1c954842824758490b95c9d5.r2.dev/Amazon.svg\",\n  },\n  {\n    id: 4,\n    name: \"Netflix\",\n    src: \"https://pub-b3533f2e1c954842824758490b95c9d5.r2.dev/Netflix.svg\",\n  },\n  {\n    id: 5,\n    name: \"YouTube\",\n    src: \"https://pub-b3533f2e1c954842824758490b95c9d5.r2.dev/YouTube.svg\",\n  },\n  {\n    id: 6,\n    name: \"Instagram\",\n    src: \"https://pub-b3533f2e1c954842824758490b95c9d5.r2.dev/Instagram.svg\",\n  },\n]\n\nconst TICK_MS = 100\n\n/**\n * Deterministic distribution (no Math.random) so server and client\n * render the same columns and hydration matches.\n */\nfunction distributeLogos(logos: Logo[], columnCount: number): Logo[][] {\n  const result: Logo[][] = Array.from({ length: columnCount }, () => [])\n\n  logos.forEach((logo, index) => {\n    result[index % columnCount].push(logo)\n  })\n\n  const maxLength = Math.max(...result.map((col) => col.length))\n  result.forEach((col, colIndex) => {\n    while (col.length < maxLength) {\n      col.push(logos[(col.length * columnCount + colIndex) % logos.length])\n    }\n  })\n\n  return result\n}\n\nexport type LogoCarouselVariant = \"default\" | \"compact\"\n\ninterface LogoCarouselProps {\n  columns?: number\n  logos?: Logo[]\n  variant?: LogoCarouselVariant\n  className?: string\n}\n\nexport function LogoCarousel({\n  columns = 4,\n  logos: logosProp,\n  variant = \"default\",\n  className,\n}: LogoCarouselProps) {\n  const logos = useMemo(() => logosProp ?? LOGOS, [logosProp])\n  const distribute = useCallback(\n    (count: number) => distributeLogos(logos, count),\n    [logos]\n  )\n\n  const [logoColumns, setLogoColumns] = useState<Logo[][]>(() =>\n    distributeLogos(logos, columns)\n  )\n  const [time, setTime] = useState(0)\n  const prevColumnsRef = useRef(columns)\n\n  useEffect(() => {\n    if (prevColumnsRef.current !== columns) {\n      prevColumnsRef.current = columns\n      setLogoColumns(distribute(columns))\n    }\n  }, [columns, distribute])\n\n  useEffect(() => {\n    const interval = setInterval(() => {\n      setTime((prev) => prev + TICK_MS)\n    }, TICK_MS)\n    return () => clearInterval(interval)\n  }, [])\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-wrap justify-center gap-6 py-8 sm:gap-8\",\n        className\n      )}\n    >\n      {logoColumns.map((columnLogos, index) => (\n        <AnimatedLogoColumn\n          key={`col-${index}`}\n          logos={columnLogos}\n          columnIndex={index}\n          currentTime={time}\n          variant={variant}\n        />\n      ))}\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "logo-cloud"
  ],
  "type": "registry:block"
}