OdysseyUI

Logo Cloud 2

Animated logo cloud that cycles groups of 3 logos with spring blur transitions.

Loading...

Installation

Usage

import LogoCloud from '@/components/odysseyui/logocloud-2';

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

export default function Page() {
  return <LogoCloud logos={logos} label="Trusted by teams using" />;
}

How It Works

  • Logos are split into groups of 3 automatically.
  • Each group cycles on a timer, animating out with a spring blur/scale exit and in with a staggered blur entrance.
  • Uses AnimatePresence mode="popLayout" for smooth cross-fade between groups.

API Reference

LogoCloud

PropTypeDefault
logos
LogoItem[]
-
label?
string
-
duration?
number
2.5

LogoItem shape

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

Built by Shr3kx & iam-sahil. The source code is available on GitHub.

Last updated: 3/26/2026