Logo Cloud 4

CSS-animated logo carousel that cycles groups with vertical blur and slide transitions.

Trusted by leading teams

Installation

Usage

For provider icons, you can use svgl — a beautiful library of SVG logos for popular brands and services.

import LogosCarousel from '@/components/odysseyui/logocloud-4';

const logos = [
  { name: 'Vercel', svg: <VercelLogo /> },
  { name: 'Stripe', svg: <StripeLogo /> },
  { name: 'Clerk', svg: <ClerkLogo /> },
  { name: 'Linear', svg: <LinearLogo /> },
];

export default function Page() {
  return (
    <LogosCarousel
      logos={logos}
      label="Trusted by leading teams"
      count={3}
      interval={2500}
    />
  );
}

How It Works

Logos are split into groups of count automatically.
After initialDelay ms the carousel activates and begins cycling every interval ms.
The outgoing group animates up with a blur exit (logos-exit) while the incoming group slides in from below (logos-enter).
Each item within a group staggers by stagger seconds for a cascading effect.
Pure CSS @keyframes — no external animation library required.

API Reference

LogosCarousel

Prop	Type	Default
`logos`	`LogoItem[]`	-
`label?`	`string`	-
`count?`	`number`	`4`
`stagger?`	`number`	`0.1`
`duration?`	`number`	`500`
`interval?`	`number`	`2500`
`initialDelay?`	`number`	`800`

LogoItem shape

interface LogoItem {
  name: string;
  svg: React.ReactNode;
}