Auto Scrolling Client Carousel

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5 
6/* ═══════════════════════════════════════════════════════════
7   Auto Scrolling Client Carousel — Dual Ribbon, Grayscale Bloom.
8 
9   Two rows of logos scrolling in opposite directions at
10   slightly offset speeds. Unlike the other two client
11   showcases, this one keeps FULL OPACITY at all times —
12   logos are always clearly visible. The "muted" state is
13   achieved through CSS grayscale, not opacity dimming:
14   monochrome at rest, color blooms on hover.
15 
16   Three paradigms, zero overlap:
17     • trusted-clients:  STATIC grid, binary OPACITY dim
18     • client-carousel:  SINGLE drift, proximity OPACITY field
19     • auto-scrolling:   DUAL ribbon, GRAYSCALE bloom (no opacity)
20 
21   Rows scroll continuously — they never pause, never stop.
22   The interaction is purely visual: grayscale(1) → grayscale(0)
23   with a spring-bounce scale lift. The motion stays constant.
24 
25   Dual-ribbon rhythm:
26     Row 1: clients in order, scrolling left, speed N
27     Row 2: clients reversed, scrolling right, speed N × 1.15
28   The slight speed offset creates a visual polyrhythm —
29   logos phase in and out of vertical alignment.
30 
31   Scale lift: cubic-bezier(0.34, 1.56, 0.64, 1) — spring with
32   slight overshoot. Different from trusted-clients' deceleration
33   and client-carousel's exponential ease.
34 
35   Seamless loop: three copies of items (not two). With only 2×,
36   the track can be shorter than the viewport at the loop point,
37   creating a visible gap. With 3×, the track always exceeds
38   viewport + one full copy. Per-item padding-left (not flex gap)
39   ensures -33.333% lands exactly at one copy boundary.
40 
41   Zero dependencies. No embla, no framer-motion, no next/image.
42   ═══════════════════════════════════════════════════════════ */
43 
44export interface AutoScrollingCarouselItem {
45  name: string;
46  logo?: React.ReactNode;
47  href?: string;
48}
49 
50export interface AutoScrollingClientCarouselProps {
51  title?: string;
52  clients?: AutoScrollingCarouselItem[];
53  /** Seconds for one full scroll cycle. Lower = faster. */
54  speed?: number;
55  className?: string;
56}
57 
58const defaultClients: AutoScrollingCarouselItem[] = [
59  { name: "Vercel" },
60  { name: "Linear" },
61// … truncated