Logo Cloud 3

Infinite scrolling logo marquee with progressive blur edges and motion-powered animation.

Powering the best teams

Installation

Usage

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

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

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

export default function Page() {
  return (
    <LogoCloud
      logos={logos}
      label="Powering the best teams"
      speed={40}
      gap={112}
    />
  );
}

How It Works

InfiniteSlider uses motion/react's animate to drive a continuous translation on the logo strip.
The strip is duplicated so the loop is seamless — the animation resets from the midpoint.
ProgressiveBlur overlays layered backdrop-filter: blur divisions masked by a linear gradient, creating soft edge feathering without cropping.
Hover pauses the animation via animationRef.current?.pause().

API Reference

LogoCloud

Prop	Type	Default
`logos`	`LogoItem[]`	-
`label?`	`string`	-
`speed?`	`number`	`40`
`gap?`	`number`	`112`
`reverse?`	`boolean`	`false`

LogoItem shape

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