{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "announcement-marquee",
  "type": "registry:component",
  "title": "Marquee announcement bar",
  "description": "Infinite scrolling strip of short messages that pauses on hover.",
  "author": "StoreKit <hello@storekit.dev>",
  "categories": [
    "announcement-bar",
    "any"
  ],
  "dependencies": [],
  "registryDependencies": [
    "https://storekit-eight.vercel.app/r/cn.json"
  ],
  "files": [
    {
      "path": "announcement-bar/announcement-marquee.tsx",
      "content": "import { cn } from \"@/components/storekit/lib/cn\"\n\n/* Infinite announcement strip. The track holds the message list twice and\n   slides by -50%, so the loop is seamless. Hover or focus pauses it; reduced\n   motion stops it and lets the row wrap. Screen readers get the list once. */\n\nexport function AnnouncementMarquee({\n  messages = [\"Free shipping over $50\", \"Third-party tested, every batch\", \"Subscribe and save 15%\", \"30-day guarantee\"],\n  duration = 28,\n  className,\n}: {\n  messages?: string[]\n  /** Seconds for one full loop. */\n  duration?: number\n  className?: string\n}) {\n  const Row = ({ hidden }: { hidden?: boolean }) => (\n    <ul aria-hidden={hidden || undefined} className=\"flex shrink-0 items-center\">\n      {messages.map((m, i) => (\n        <li key={i} className=\"flex items-center whitespace-nowrap\">\n          <span className=\"px-6\">{m}</span>\n          <span aria-hidden className=\"h-1 w-1 rotate-45 bg-sk-bar-ink/50\" />\n        </li>\n      ))}\n    </ul>\n  )\n  return (\n    <div\n      role=\"region\"\n      aria-label=\"Announcements\"\n      data-sk-section=\"announcement-bar\"\n      data-sk-variant=\"announcement-marquee\"\n      className={cn(\"group relative overflow-hidden bg-sk-bar text-sk-bar-ink\", className)}\n    >\n      <div\n        className=\"flex h-10 w-max items-center font-sk-mono text-[11px] uppercase tracking-[0.14em] animate-sk-marquee group-hover:[animation-play-state:paused] group-focus-within:[animation-play-state:paused] motion-reduce:animate-none\"\n        style={{ animationDuration: `${duration}s` }}\n      >\n        <Row />\n        <Row hidden />\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/storekit/announcement-bar/announcement-marquee.tsx"
    }
  ],
  "docs": "Needs the sk-marquee keyframe from the StoreKit Tailwind preset.",
  "meta": {
    "section": "announcement-bar",
    "variant": "marquee",
    "niche": [
      "any"
    ],
    "commerce": [
      "promo"
    ],
    "previewHeight": 120
  }
}