{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "logo-ticker-infinite",
  "title": "Logo Ticker Infinite",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/logo-ticker-infinite/LogoTickerInfinite.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Pause, Play } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\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\nconst selectedCategory = ref<CategoryFilter>('all')\nconst isPaused = ref(false)\nconst isFastSpeed = ref(false)\nconst hoveredBrand = ref<BrandPartner | null>(null)\n\nconst filteredPartners = computed(() => {\n  if (selectedCategory.value === 'all') return partners\n  return partners.filter((p) => p.category === selectedCategory.value)\n})\n</script>\n\n<template>\n  <section\n    data-slot=\"logo-ticker-infinite\"\n    class=\"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  >\n    <div class=\"mx-auto max-w-7xl space-y-8 text-center\">\n      <!-- Section Header & Category Filter Controls -->\n      <div\n        class=\"border-border/60 flex flex-col items-center justify-between gap-4 border-b pb-6 text-left md:flex-row\"\n      >\n        <div class=\"space-y-1\">\n          <div class=\"flex items-center gap-2\">\n            <span class=\"bg-success size-2 rounded-full\" />\n            <p class=\"text-foreground font-mono text-xs font-semibold tracking-wider uppercase\">\n              Production Verified Infrastructure\n            </p>\n          </div>\n          <p class=\"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 class=\"flex flex-wrap items-center gap-2\">\n          <!-- Category Filter Pills -->\n          <div class=\"bg-background border-border flex items-center gap-1 rounded-lg border p-0.5\">\n            <button\n              v-for=\"cat in ['all', 'devtools', 'fintech', 'enterprise'] as CategoryFilter[]\"\n              :key=\"cat\"\n              type=\"button\"\n              class=\"rounded-md px-2.5 py-1 font-mono text-xs capitalize transition-colors\"\n              :class=\"\n                selectedCategory === cat\n                  ? 'bg-primary text-primary-foreground font-semibold shadow-xs'\n                  : 'text-muted-foreground hover:text-foreground'\n              \"\n              @click=\"selectedCategory = cat\"\n            >\n              {{ cat }}\n            </button>\n          </div>\n\n          <!-- Marquee Speed / Pause Controls -->\n          <div class=\"flex items-center gap-1\">\n            <button\n              type=\"button\"\n              class=\"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              @click=\"isPaused = !isPaused\"\n            >\n              <Play v-if=\"isPaused\" class=\"size-3.5 fill-current\" />\n              <Pause v-else class=\"size-3.5\" />\n            </button>\n            <button\n              type=\"button\"\n              class=\"border-border bg-background text-muted-foreground hover:text-foreground rounded-lg border px-2 py-1 font-mono text-xs transition-colors\"\n              @click=\"isFastSpeed = !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 class=\"group relative overflow-hidden\">\n        <!-- Left & Right Gradient Shadows -->\n        <div\n          class=\"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        />\n        <div\n          class=\"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\n        <!-- Double Track Container for Seamless Infinite Scrolling -->\n        <div\n          class=\"flex w-max items-center gap-4 py-3\"\n          :class=\"[\n            isPaused ? '' : 'animate-marquee',\n            isFastSpeed ? '[animation-duration:15s]' : '[animation-duration:32s]',\n          ]\"\n        >\n          <!-- Repeat partners array twice for infinite seamless loop -->\n          <div\n            v-for=\"(item, idx) in [...filteredPartners, ...filteredPartners]\"\n            :key=\"`${item.id}-${idx}`\"\n            class=\"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            @mouseenter=\"hoveredBrand = item\"\n            @mouseleave=\"hoveredBrand = null\"\n          >\n            <div\n              class=\"bg-primary/10 text-primary flex size-7 items-center justify-center rounded-lg font-mono text-xs font-bold\"\n            >\n              {{ item.name.charAt(0) }}\n            </div>\n\n            <div class=\"text-left\">\n              <p class=\"text-foreground font-mono text-xs font-semibold tracking-tight\">{{ item.name }}</p>\n              <p class=\"text-muted-foreground text-xs\">{{ item.role }}</p>\n            </div>\n\n            <Badge variant=\"outline\" class=\"border-success/20 bg-success/10 text-success ml-1 font-mono text-xs\">\n              {{ item.metric }}\n            </Badge>\n          </div>\n        </div>\n      </div>\n\n      <!-- Live Hover Telemetry Card -->\n      <div\n        v-if=\"hoveredBrand\"\n        class=\"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      >\n        <div class=\"flex items-center justify-between font-mono text-xs\">\n          <span class=\"text-foreground font-bold\">{{ hoveredBrand.name }} Architecture Integration</span>\n          <span class=\"text-success\">{{ hoveredBrand.region }}</span>\n        </div>\n        <p class=\"text-muted-foreground mt-1 text-xs\">\n          Connected through {{ hoveredBrand.role }} &bull; Monitored with {{ hoveredBrand.metric }} verified telemetry.\n        </p>\n      </div>\n    </div>\n  </section>\n</template>\n\n<style scoped>\n@keyframes marquee {\n  0% {\n    transform: translateX(0%);\n  }\n  100% {\n    transform: translateX(-50%);\n  }\n}\n.animate-marquee {\n  animation: marquee 32s linear infinite;\n}\n.animate-marquee:hover {\n  animation-play-state: paused;\n}\n</style>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/LogoTickerInfinite.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/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"
}