Client Carousel Showcase

Installation

Usage

import ClientCarouselShowcase from "@/components/ruixen/client-carousel-showcase";
 
// Text-based logos (default)
<ClientCarouselShowcase />
 
// With custom logo elements
const clients = [
  {
    name: "GitHub",
    logo: <img src="/github.svg" alt="" className="h-6 w-auto" />,
  },
  {
    name: "Vercel",
    logo: <img src="/vercel.svg" alt="" className="h-5 w-auto" />,
  },
  { name: "Linear" },
  { name: "Stripe" },
];
 
<ClientCarouselShowcase
  clients={clients}
  title="Backed by the best"
  speed={25}
/>
 
// Reverse direction
<ClientCarouselShowcase reverse />

Props

ClientCarouselItem

Features

• Infinite Drift: CSS @keyframes translates a doubled track from 0 to -50% — seamless loop with no JS timers or carousel libraries
• Gradient Edge Masks: mask-image: linear-gradient(...) fades the leading and trailing 8% to transparent — logos emerge from and dissolve into nothing
• Pause on Hover: animation-play-state: paused — the track freezes when your cursor enters, resumes when it leaves
• Proximity Field: Unlike binary hover, the cursor creates a 200px gaussian field of influence. Logos respond proportionally to distance — closest gets scale(1.12), translateY(-4px), full opacity. The smoothstep function t²(3-2t) ensures zero-derivative at both ends for natural, artifact-free falloff
• 60fps DOM Updates: Proximity calculations run via mousemove with direct el.style mutation — no React state re-renders, no requestAnimationFrame needed. CSS transition: 0.35s handles interpolation between frames
• Speed & Direction Control: speed prop controls cycle duration; reverse flips the drift direction
• Text-Based Defaults: Default clients render as clean semibold text — pass custom logo ReactNodes for real brand logos
• Zero Dependencies: No embla-carousel, no framer-motion, no next/image — pure CSS animation + minimal JS proximity math
• Accessibility: Semantic section, aria-label on linked logos, keyboard-focusable