{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "typographic-marquee",
  "type": "registry:component",
  "title": "Typographic marquee",
  "description": "A large type Tailwind marquee that loops phrases horizontally in an endless scroll. Pass a phrases array; the loop stops for users who prefer reduced motion.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/typographic-marquee.tsx",
      "type": "registry:ui",
      "target": "components/ui/typographic-marquee.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\nfunction TypographicMarquee({\n  phrases,\n  text,\n  className,\n}: {\n  phrases?: string[]\n  /** @deprecated use phrases */\n  text?: string\n  className?: string\n}) {\n  const reduce = useReducedMotion()\n  const items =\n    phrases ??\n    (text\n      ? [text]\n      : [\"Realtime sync\", \"Offline first\", \"SOC 2 Type II\", \"99.99% uptime\", \"Ships weekly\", \"Loved by teams\"])\n  const loop = [...items, ...items]\n  return (\n    <section\n      data-slot=\"typographic-marquee\"\n      data-tier=\"premium\"\n      className={cn(\n        \"w-full min-w-0 max-w-full overflow-hidden rounded-2xl border border-border bg-bg py-6 sm:py-8\",\n        className\n      )}\n      aria-label=\"Marquee phrases\"\n    >\n      <div className=\"w-full max-w-full overflow-hidden\">\n        <motion.div\n          className=\"flex w-max gap-10 whitespace-nowrap px-6\"\n          animate={reduce ? undefined : { x: [\"0%\", \"-50%\"] }}\n          transition={\n            reduce\n              ? undefined\n              : { duration: 28, ease: \"linear\", repeat: Number.POSITIVE_INFINITY }\n          }\n        >\n          {loop.map((phrase, i) => (\n            <span\n              key={phrase + String(i)}\n              className=\"text-3xl font-medium tracking-[-0.026em] text-fg/90 sm:text-5xl sm:tracking-[-0.030em]\"\n            >\n              {phrase}\n              <span className=\"mx-5 text-accent sm:mx-6\">·</span>\n            </span>\n          ))}\n        </motion.div>\n      </div>\n    </section>\n  )\n}\nexport { TypographicMarquee }\n"
    }
  ]
}