{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "auto-scrolling-client-carousel",
  "type": "registry:ui",
  "title": "Auto Scrolling Client Carousel",
  "description": "Dual ribbon with grayscale bloom — two rows scroll in opposite directions, monochrome at rest, color blooms on hover with spring-bounce lift.",
  "dependencies": [],
  "files": [
    {
      "path": "registry/ruixenui/auto-scrolling-client-carousel.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n/* ═══════════════════════════════════════════════════════════\n   Auto Scrolling Client Carousel — Dual Ribbon, Grayscale Bloom.\n\n   Two rows of logos scrolling in opposite directions at\n   slightly offset speeds. Unlike the other two client\n   showcases, this one keeps FULL OPACITY at all times —\n   logos are always clearly visible. The \"muted\" state is\n   achieved through CSS grayscale, not opacity dimming:\n   monochrome at rest, color blooms on hover.\n\n   Three paradigms, zero overlap:\n     • trusted-clients:  STATIC grid, binary OPACITY dim\n     • client-carousel:  SINGLE drift, proximity OPACITY field\n     • auto-scrolling:   DUAL ribbon, GRAYSCALE bloom (no opacity)\n\n   Rows scroll continuously — they never pause, never stop.\n   The interaction is purely visual: grayscale(1) → grayscale(0)\n   with a spring-bounce scale lift. The motion stays constant.\n\n   Dual-ribbon rhythm:\n     Row 1: clients in order, scrolling left, speed N\n     Row 2: clients reversed, scrolling right, speed N × 1.15\n   The slight speed offset creates a visual polyrhythm —\n   logos phase in and out of vertical alignment.\n\n   Scale lift: cubic-bezier(0.34, 1.56, 0.64, 1) — spring with\n   slight overshoot. Different from trusted-clients' deceleration\n   and client-carousel's exponential ease.\n\n   Seamless loop: three copies of items (not two). With only 2×,\n   the track can be shorter than the viewport at the loop point,\n   creating a visible gap. With 3×, the track always exceeds\n   viewport + one full copy. Per-item padding-left (not flex gap)\n   ensures -33.333% lands exactly at one copy boundary.\n\n   Zero dependencies. No embla, no framer-motion, no next/image.\n   ═══════════════════════════════════════════════════════════ */\n\nexport interface AutoScrollingCarouselItem {\n  name: string;\n  logo?: React.ReactNode;\n  href?: string;\n}\n\nexport interface AutoScrollingClientCarouselProps {\n  title?: string;\n  clients?: AutoScrollingCarouselItem[];\n  /** Seconds for one full scroll cycle. Lower = faster. */\n  speed?: number;\n  className?: string;\n}\n\nconst defaultClients: AutoScrollingCarouselItem[] = [\n  { name: \"Vercel\" },\n  { name: \"Linear\" },\n  { name: \"Stripe\" },\n  { name: \"Notion\" },\n  { name: \"Figma\" },\n  { name: \"Raycast\" },\n  { name: \"Loom\" },\n  { name: \"Pitch\" },\n];\n\n/* ── Single ribbon row ─────────────────────────────────── */\n\nfunction Ribbon({\n  items,\n  speed,\n  reverse,\n}: {\n  items: AutoScrollingCarouselItem[];\n  speed: number;\n  reverse: boolean;\n}) {\n  // Triple for viewport coverage — at any scroll offset,\n  // at least 2 copies fill the visible area.\n  const tripled = [...items, ...items, ...items];\n\n  return (\n    <div\n      className=\"overflow-hidden py-4\"\n      style={{\n        maskImage:\n          \"linear-gradient(to right, transparent, black 8%, black 92%, transparent)\",\n        WebkitMaskImage:\n          \"linear-gradient(to right, transparent, black 8%, black 92%, transparent)\",\n      }}\n    >\n      <div\n        className=\"flex w-max items-center\"\n        style={{\n          animation: `auto-scroll-ribbon ${speed}s linear infinite`,\n          animationDirection: reverse ? \"reverse\" : \"normal\",\n        }}\n      >\n        {tripled.map((client, i) => (\n          <div\n            key={i}\n            className=\"flex shrink-0 items-center justify-center pl-14 sm:pl-16\"\n            style={{\n              filter: \"grayscale(1)\",\n              transition:\n                \"filter 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)\",\n            }}\n            onMouseEnter={(e) => {\n              e.currentTarget.style.filter = \"grayscale(0)\";\n              e.currentTarget.style.transform = \"scale(1.06) translateY(-2px)\";\n            }}\n            onMouseLeave={(e) => {\n              e.currentTarget.style.filter = \"grayscale(1)\";\n              e.currentTarget.style.transform = \"scale(1) translateY(0)\";\n            }}\n          >\n            {client.href ? (\n              <a\n                href={client.href}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                className=\"inline-flex items-center\"\n                aria-label={client.name}\n              >\n                {client.logo || (\n                  <span className=\"select-none whitespace-nowrap text-xl font-semibold tracking-tight text-foreground\">\n                    {client.name}\n                  </span>\n                )}\n              </a>\n            ) : (\n              <span className=\"inline-flex items-center\">\n                {client.logo || (\n                  <span className=\"select-none whitespace-nowrap text-xl font-semibold tracking-tight text-foreground\">\n                    {client.name}\n                  </span>\n                )}\n              </span>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\n/* ── Main component ────────────────────────────────────── */\n\nexport function AutoScrollingClientCarousel({\n  title = \"Trusted by leading teams\",\n  clients = defaultClients,\n  speed = 35,\n  className,\n}: AutoScrollingClientCarouselProps) {\n  const reversed = React.useMemo(() => [...clients].reverse(), [clients]);\n\n  return (\n    <section className={cn(\"py-16 md:py-24\", className)}>\n      <div className=\"mx-auto max-w-5xl px-6\">\n        {title && (\n          <p className=\"mb-8 text-center text-sm font-medium uppercase tracking-wider text-muted-foreground\">\n            {title}\n          </p>\n        )}\n\n        <div className=\"space-y-2\">\n          <Ribbon items={clients} speed={speed} reverse={false} />\n          <Ribbon items={reversed} speed={speed * 1.15} reverse={true} />\n        </div>\n      </div>\n\n      <style\n        dangerouslySetInnerHTML={{\n          __html: `\n@keyframes auto-scroll-ribbon {\n  from { transform: translateX(0); }\n  to { transform: translateX(calc(-100% / 3)); }\n}`,\n        }}\n      />\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/auto-scrolling-client-carousel.tsx"
    }
  ]
}