OdysseyUI

Logo Cloud 1

Animated logo cloud with staggered fade-in and group cycling.

Loading...

Installation

Usage

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

import {
  LogoCloud,
  LogoCloudGroup,
  LogoCloudItem,
} from '@/components/odysseyui/logocloud-1';

export default function Page() {
  return (
    <LogoCloud label="Trusted by">
      <LogoCloudGroup>
        <LogoCloudItem icon={<YourLogo />} name="Brand" />
      </LogoCloudGroup>
    </LogoCloud>
  );
}

How It Works

  • LogoCloud cycles through LogoCloudGroup children on a timer.
  • Each group fades out with a staggered blur effect before the next group fades in.
  • LogoCloudItem receives its stagger index automatically via React.cloneElement.

API Reference

LogoCloud

PropTypeDefault
label?
string
""
displayDuration?
number
2000
fadeDuration?
number
0.6
staggerDelay?
number
0.08
className?
string
-

LogoCloudItem

PropTypeDefault
icon
ReactNode
-
name
string
-

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

Last updated: 3/26/2026