{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "logo-cloud-1",
  "title": "Logo Cloud 1: marquee or grid",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "Customer logos as an endlessly scrolling row with faded edges, or a static grid with hairline dividers. Wordmarks brighten on hover.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.ballmac.com/r/marquee.json"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/blocks/logo-cloud-1/logo-cloud-1.tsx",
      "content": "// Ballmac UI: Logo Cloud 1. https://ui.ballmac.com/blocks/logo-cloud-1\nimport * as React from \"react\"\nimport { Aperture, Atom, Boxes, Hexagon, Layers, Orbit, Triangle, Waves, type LucideIcon } from \"lucide-react\"\n\nimport { Marquee } from \"@/components/ballmac/marquee\"\nimport { cn } from \"@/lib/utils\"\n\ntype Logo = {\n  /** Company name, used as the accessible label and shown as a wordmark. */\n  name: string\n  /** A mark drawn before the name. Swap for your customers' SVG logos. */\n  icon?: LucideIcon\n  /** Render your own logo instead of the icon and name. */\n  logo?: React.ReactNode\n}\n\ntype LogoCloud1Props = Omit<React.ComponentProps<\"section\">, \"title\"> & {\n  /** Line above the logos. */\n  title?: string\n  /** Logos to show. */\n  logos?: Logo[]\n  /** A scrolling row, or a static grid with hairline dividers. */\n  variant?: \"marquee\" | \"grid\"\n}\n\nconst defaultLogos: Logo[] = [\n  { name: \"Acme\", icon: Triangle },\n  { name: \"Lumen\", icon: Aperture },\n  { name: \"Halcyon\", icon: Waves },\n  { name: \"Meridian\", icon: Orbit },\n  { name: \"Parallax\", icon: Layers },\n  { name: \"Quanta\", icon: Atom },\n  { name: \"Hexline\", icon: Hexagon },\n  { name: \"Stackwise\", icon: Boxes },\n]\n\nfunction Wordmark({ logo }: { logo: Logo }) {\n  if (logo.logo) return <>{logo.logo}</>\n  const Icon = logo.icon\n  return (\n    <span className=\"flex items-center gap-2 text-xl font-semibold tracking-tight whitespace-nowrap text-muted-foreground transition-colors hover:text-foreground\">\n      {Icon && <Icon className=\"size-6\" strokeWidth={2.2} aria-hidden=\"true\" />}\n      {logo.name}\n    </span>\n  )\n}\n\nfunction LogoCloud1({ title = \"Trusted by fast-moving product teams\", logos = defaultLogos, variant = \"marquee\", className, ...props }: LogoCloud1Props) {\n  return (\n    <section data-slot=\"logo-cloud-1\" aria-label={title} className={cn(\"mx-auto max-w-6xl px-4 py-16 sm:px-6\", className)} {...props}>\n      <p className=\"text-center text-sm font-medium text-muted-foreground\">{title}</p>\n      {variant === \"marquee\" ? (\n        <Marquee speed={36} gap={64} fade pauseOnHover className=\"mt-8 py-2\">\n          {logos.map((l) => (\n            <Wordmark key={l.name} logo={l} />\n          ))}\n        </Marquee>\n      ) : (\n        <ul className=\"mt-8 grid grid-cols-2 overflow-hidden rounded-2xl border sm:grid-cols-4\">\n          {logos.map((l) => (\n            <li key={l.name} className=\"-me-px -mb-px flex h-24 items-center justify-center border-e border-b\">\n              <Wordmark logo={l} />\n            </li>\n          ))}\n        </ul>\n      )}\n    </section>\n  )\n}\n\nexport { LogoCloud1, type LogoCloud1Props, type Logo }\n",
      "type": "registry:component",
      "target": "@components/ballmac/blocks/logo-cloud-1/logo-cloud-1.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "logos",
      "social proof",
      "customers",
      "marquee"
    ],
    "version": "1.0.0",
    "updated": "2026-09-29",
    "ai": {
      "summary": "Social proof strip under a hero. Pass `logos` ({ name, icon? | logo? }[]) with your customers' SVG logos via `logo`; choose variant \"marquee\" or \"grid\".",
      "whenToUse": [
        "Directly under a hero",
        "Near pricing to reassure buyers"
      ],
      "whenNotToUse": [
        "Fewer than four logos (use a single line of text)"
      ],
      "composesWith": [
        "hero-1",
        "hero-2",
        "testimonials-1"
      ],
      "a11y": [],
      "customization": [
        "title, logos, variant props",
        "Marquee speed and gap in the source"
      ]
    },
    "examples": [
      "logo-cloud-1-demo",
      "logo-cloud-1-grid"
    ],
    "url": "https://ui.ballmac.com/components/logo-cloud-1"
  },
  "categories": [
    "blocks",
    "logo-cloud"
  ],
  "type": "registry:block"
}