Logo Cloud 5

CSS marquee logo cloud with configurable direction, speed, gap, and gradient fade edges.

Used by modern companies

Installation

Usage

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

import LogoMarquee from '@/components/odysseyui/logocloud-5';

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

export default function Page() {
  return (
    <LogoMarquee
      logos={logos}
      label="Used by modern companies"
      duration={40}
      gap={200}
    />
  );
}

How It Works

The Marquee primitive renders each logo twice side-by-side so the CSS translateX(-50%) loop is seamless.
Four directional keyframes (marquee-x, marquee-x-reverse, marquee-y, marquee-y-reverse) support horizontal and vertical scrolling.
A mask-image linear gradient on the wrapper fades the leading and trailing edges.
Hover pauses the CSS animation via animation-play-state: paused.
No external animation library — pure CSS @keyframes.

API Reference

LogoMarquee

Prop	Type	Default
`logos`	`LogoItem[]`	-
`label?`	`string`	-
`duration?`	`number`	`20`
`gap?`	`number`	`80`
`reverse?`	`boolean`	`false`
`pauseOnHover?`	`boolean`	`true`
`fade?`	`boolean`	`true`
`fadeAmount?`	`number`	`10`

Marquee (primitive)

The Marquee component is also exported directly for custom usage:

import { Marquee } from '@/components/odysseyui/logocloud-5';

<Marquee direction="left" duration={30} gap={64} pauseOnHover fade>
  <img src="/logo-a.svg" alt="Brand A" />
  <img src="/logo-b.svg" alt="Brand B" />
</Marquee>;

Prop	Type	Default
`direction?`	`"left" \| "right" \| "up" \| "down"`	`"left"`
`duration?`	`number`	`20`
`gap?`	`number`	`32`
`pauseOnHover?`	`boolean`	`false`
`fade?`	`boolean`	`true`
`fadeAmount?`	`number`	`10`

LogoItem shape

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