{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "logo-ticker-infinite",
  "title": "Logo Ticker Infinite",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/logo-ticker-infinite/LogoTickerInfinite.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { Pause, Play } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { cn } from '@/lib/utils'\n\ninterface BrandPartner {\n  id: string\n  name: string\n  category: 'devtools' | 'fintech' | 'enterprise'\n  role: string\n  metric: string\n  region: string\n}\n\nconst partners: BrandPartner[] = [\n  {\n    id: 'vercel',\n    name: 'Vercel Edge',\n    category: 'devtools',\n    role: 'Global Edge Ingestion',\n    metric: '99.95% SLA',\n    region: 'Global',\n  },\n  {\n    id: 'supabase',\n    name: 'Supabase Postgres',\n    category: 'devtools',\n    role: 'Real-Time Replication',\n    metric: '1.2M QPS',\n    region: 'US-East',\n  },\n  {\n    id: 'linear',\n    name: 'Linear Method',\n    category: 'enterprise',\n    role: 'Issue Sync Engine',\n    metric: '< 20ms Sync',\n    region: 'Global',\n  },\n  {\n    id: 'stripe',\n    name: 'Stripe Billing',\n    category: 'fintech',\n    role: 'Usage Metering Gateway',\n    metric: '$120M+ Processed',\n    region: 'Global',\n  },\n  {\n    id: 'resend',\n    name: 'Resend SMTP',\n    category: 'devtools',\n    role: 'Transactional Dispatch',\n    metric: '200M msgs/mo',\n    region: 'US-West',\n  },\n  {\n    id: 'cloudflare',\n    name: 'Cloudflare Workers',\n    category: 'devtools',\n    role: 'Zero-Trust Isolation',\n    metric: '300+ Cities',\n    region: 'Global',\n  },\n  {\n    id: 'planetscale',\n    name: 'PlanetScale DB',\n    category: 'enterprise',\n    role: 'Branching Schema',\n    metric: 'Zero Downtime',\n    region: 'EU-Central',\n  },\n  {\n    id: 'brex',\n    name: 'Brex Treasury',\n    category: 'fintech',\n    role: 'Ledger Reconciliation',\n    metric: 'Real-time API',\n    region: 'US-East',\n  },\n]\n\ntype CategoryFilter = 'all' | 'devtools' | 'fintech' | 'enterprise'\n\nexport interface LogoTickerInfiniteProps {\n  className?: string\n}\n\nexport function LogoTickerInfinite({ className }: LogoTickerInfiniteProps) {\n  const [selectedCategory, setSelectedCategory] = React.useState<CategoryFilter>('all')\n  const [isPaused, setIsPaused] = React.useState(false)\n  const [isFastSpeed, setIsFastSpeed] = React.useState(false)\n  const [hoveredBrand, setHoveredBrand] = React.useState<BrandPartner | null>(null)\n\n  const filteredPartners = React.useMemo(() => {\n    if (selectedCategory === 'all') return partners\n    return partners.filter((p) => p.category === selectedCategory)\n  }, [selectedCategory])\n\n  return (\n    <section\n      data-slot=\"logo-ticker-infinite\"\n      className={cn(\n        'border-border/80 bg-muted/20 relative overflow-hidden border-y px-4 py-14 sm:px-6 sm:py-20 lg:px-8',\n        className,\n      )}\n    >\n      <div className=\"mx-auto max-w-7xl space-y-8 text-center\">\n        {/* Section Header & Category Filter Controls */}\n        <div className=\"border-border/60 flex flex-col items-center justify-between gap-4 border-b pb-6 text-left md:flex-row\">\n          <div className=\"space-y-1\">\n            <div className=\"flex items-center gap-2\">\n              <span className=\"bg-success size-2 rounded-full\" />\n              <p className=\"text-foreground font-mono text-xs font-semibold tracking-wider uppercase\">\n                Production Verified Infrastructure\n              </p>\n            </div>\n            <p className=\"text-muted-foreground text-xs\">\n              Trusted by modern engineering teams shipping high-throughput production workloads.\n            </p>\n          </div>\n\n          {/* Filter & Control Buttons */}\n          <div className=\"flex flex-wrap items-center gap-2\">\n            {/* Category Filter Pills */}\n            <div className=\"bg-background border-border flex items-center gap-1 rounded-lg border p-0.5\">\n              {(['all', 'devtools', 'fintech', 'enterprise'] as CategoryFilter[]).map((cat) => (\n                <button\n                  key={cat}\n                  type=\"button\"\n                  className={cn(\n                    'rounded-md px-2.5 py-1 font-mono text-xs capitalize transition-colors',\n                    selectedCategory === cat\n                      ? 'bg-primary text-primary-foreground font-semibold shadow-xs'\n                      : 'text-muted-foreground hover:text-foreground',\n                  )}\n                  onClick={() => setSelectedCategory(cat)}\n                >\n                  {cat}\n                </button>\n              ))}\n            </div>\n\n            {/* Marquee Speed / Pause Controls */}\n            <div className=\"flex items-center gap-1\">\n              <button\n                type=\"button\"\n                className=\"border-border bg-background text-muted-foreground hover:text-foreground rounded-lg border p-1.5 transition-colors\"\n                title={isPaused ? 'Resume Ticker' : 'Pause Ticker'}\n                onClick={() => setIsPaused(!isPaused)}\n              >\n                {isPaused ? <Play className=\"size-3.5 fill-current\" /> : <Pause className=\"size-3.5\" />}\n              </button>\n              <button\n                type=\"button\"\n                className=\"border-border bg-background text-muted-foreground hover:text-foreground rounded-lg border px-2 py-1 font-mono text-xs transition-colors\"\n                onClick={() => setIsFastSpeed(!isFastSpeed)}\n              >\n                {isFastSpeed ? '2x' : '1x'}\n              </button>\n            </div>\n          </div>\n        </div>\n\n        {/* Infinite Marquee Track Viewport with Gradient Fade Edges */}\n        <div className=\"group relative overflow-hidden\">\n          {/* Left & Right Gradient Shadows */}\n          <div className=\"from-background via-background/80 pointer-events-none absolute inset-y-0 left-0 z-10 w-16 bg-gradient-to-r to-transparent sm:w-28\" />\n          <div className=\"from-background via-background/80 pointer-events-none absolute inset-y-0 right-0 z-10 w-16 bg-gradient-to-l to-transparent sm:w-28\" />\n\n          {/* Double Track Container for Seamless Infinite Scrolling */}\n          <div\n            className={cn(\n              'flex w-max items-center gap-4 py-3',\n              !isPaused && 'animate-marquee',\n              isFastSpeed ? '[animation-duration:15s]' : '[animation-duration:32s]',\n            )}\n            style={{\n              animationPlayState: isPaused ? 'paused' : 'running',\n            }}\n          >\n            {/* Repeat partners array twice for infinite seamless loop */}\n            {[...filteredPartners, ...filteredPartners].map((item, idx) => (\n              <div\n                key={`${item.id}-${idx}`}\n                className=\"border-border bg-card/80 hover:bg-card hover:border-primary/50 relative flex shrink-0 cursor-pointer items-center gap-3 rounded-xl border px-4 py-2.5 shadow-xs backdrop-blur-md transition-colors duration-200\"\n                onMouseEnter={() => setHoveredBrand(item)}\n                onMouseLeave={() => setHoveredBrand(null)}\n              >\n                <div className=\"bg-primary/10 text-primary flex size-7 items-center justify-center rounded-lg font-mono text-xs font-bold\">\n                  {item.name.charAt(0)}\n                </div>\n\n                <div className=\"text-left\">\n                  <p className=\"text-foreground font-mono text-xs font-semibold tracking-tight\">{item.name}</p>\n                  <p className=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n\n                <Badge\n                  variant=\"outline\"\n                  className=\"border-success/20 bg-success/10 text-success ml-1 font-mono text-xs\"\n                >\n                  {item.metric}\n                </Badge>\n              </div>\n            ))}\n          </div>\n        </div>\n\n        {/* Live Hover Telemetry Card */}\n        {hoveredBrand && (\n          <div className=\"border-border bg-card animate-in fade-in-0 mx-auto max-w-md rounded-xl border p-3 text-left shadow-lg duration-150\">\n            <div className=\"flex items-center justify-between font-mono text-xs\">\n              <span className=\"text-foreground font-bold\">{hoveredBrand.name} Architecture Integration</span>\n              <span className=\"text-success\">{hoveredBrand.region}</span>\n            </div>\n            <p className=\"text-muted-foreground mt-1 text-xs\">\n              Connected through {hoveredBrand.role} &bull; Monitored with {hoveredBrand.metric} verified telemetry.\n            </p>\n          </div>\n        )}\n      </div>\n\n      <style>{`\n        @keyframes marquee {\n          0% { transform: translateX(0%); }\n          100% { transform: translateX(-50%); }\n        }\n        .animate-marquee {\n          animation: marquee 32s linear infinite;\n        }\n      `}</style>\n    </section>\n  )\n}\nexport default LogoTickerInfinite\n",
      "type": "registry:block",
      "target": "~/components/blocks/LogoTickerInfinite.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json"
  ],
  "description": "Infinite marquee brand partner ticker with sector category filters, speed and pause controls, and interactive telemetry hover cards.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "logos"
}