Trusted Clients Showcase

Installation

Usage

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

Props

LogoItem

Features

• Staggered Blur-Up Entrance: Each logo fades from blur(4px) + translateY(8px) to clear, staggered 60ms apart, triggered by IntersectionObserver when the section scrolls into view
• Collective Spotlight: Hover any logo and it lifts to 100% opacity with translateY(-2px). All others dim to 20% — a theatrical spotlight that makes the hovered brand stand out
• Dual-Speed Transitions: Entrance uses 500ms deceleration for drama; hover switches to 250ms for snappy feedback after the entrance completes
• Text-Based Defaults: No placeholder images — default clients render as clean, semibold text. Pass custom logo ReactNodes for real brand logos
• Zero Dependencies: No framer-motion, no next/image — pure CSS transitions with IntersectionObserver. Portable to any React framework
• Accessibility: Semantic section with links, aria-label on linked logos, keyboard-focusable