{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "agency-clients",
  "title": "Agency: Clients",
  "description": "Client names as wordmarks in a ruled grid, then three numbers that roll up once.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://eased.dev/r/eased-tokens.json",
    "https://eased.dev/r/eased-motion.json",
    "https://eased.dev/r/agency-core.json",
    "https://eased.dev/r/number-roll.json"
  ],
  "files": [
    {
      "path": "src/registry/eased/templates/agency/clients.tsx",
      "content": "\"use client\";\n\nimport { useInView } from \"motion/react\";\nimport { useRef } from \"react\";\nimport { NumberRoll } from \"../../number-roll/number-roll\";\nimport { clients } from \"./content\";\nimport { Reveal, Section } from \"./kit\";\n\nconst TYPE = {\n  sans: \"font-sans font-semibold tracking-[-0.03em]\",\n  serif: \"font-serif\",\n  mono: \"font-mono\",\n} as const;\n\n/**\n * Who the studio has worked for: the clients' names set as wordmarks in a ruled grid, each in\n * its own kind of type, then three numbers that roll up once, the first time they are seen\n * (rule 115).\n */\nexport function Clients() {\n  const ref = useRef<HTMLDListElement>(null);\n  const seen = useInView(ref, { once: true, amount: 0.5 });\n  return (\n    <Section id=\"clients\" label={clients.label} className=\"flex flex-col gap-group\">\n      <Reveal>\n        <p className=\"max-w-2xl font-display text-display-3xl font-medium tracking-display text-balance text-text\">{clients.title}</p>\n      </Reveal>\n      <Reveal index={1}>\n        <ul className=\"grid grid-cols-2 border-t border-l border-line-subtle md:grid-cols-4\">\n          {clients.names.map((c) => (\n            <li\n              key={c.name}\n              className={`flex h-28 items-center justify-center border-r border-b border-line-subtle px-in text-display-xl text-text-secondary sm:h-36 sm:text-display-2xl ${TYPE[c.style]}`}\n            >\n              {c.name}\n            </li>\n          ))}\n        </ul>\n      </Reveal>\n      <dl ref={ref} className=\"grid gap-pad-lg sm:grid-cols-3\">\n        {clients.numbers.map((n, i) => (\n          <Reveal key={n.label} index={i} className=\"flex flex-col gap-1\">\n            <dt className=\"text-ui text-pretty text-text-secondary\">{n.label}</dt>\n            {/* The number reads first; the term stays first in the markup, as a dl needs. */}\n            <dd className=\"order-first font-display text-display-5xl font-medium tracking-display text-text tabular-nums\">\n              <NumberRoll value={seen ? n.value : 0} locale=\"en-US\" />\n            </dd>\n          </Reveal>\n        ))}\n      </dl>\n    </Section>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/eased/templates/agency/clients.tsx"
    }
  ],
  "meta": {
    "template": "agency",
    "kind": "template-section",
    "industries": [
      "media"
    ]
  },
  "type": "registry:block"
}