Docs·Logo Cloud 004

Logo Cloud 004

Infinite CSS marquee for logos with gradient edge fades, hover pause, and a reusable Marquee primitive.

Installation

$pnpm dlx shadcn@latest add @spiderui/logo-cloud-004

Usage

LogoMarquee wraps the lower-level Marquee primitive with a label and logo list. The track duplicates children for a seamless CSS loop, supports four scroll directions, and optional edge fades via mask-image.

Brand SVGs: svgl.

API Reference

PropTypeDefault
logosLogo entries for LogoMarquee.
LogoCloud004Item[]—
labelOptional heading above the marquee (LogoMarquee).
string—
durationFull scroll cycle duration in seconds.
number20
gapPixel gap between logos (LogoMarquee default 80, Marquee default 32).
number80
reverseScroll right instead of left (LogoMarquee).
booleanfalse
pauseOnHoverPause on hover (LogoMarquee). Marquee primitive defaults to false.
booleantrue
fadeGradient fade on leading/trailing edges.
booleantrue
fadeAmountPercentage of container used for each fade edge.
number10
directionScroll direction (Marquee).
"left" | "right" | "up" | "down""left"
classNameClasses on the outer section or marquee container.
string—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@ctrlcat0x

Used by modern companies

import { LogoMarquee } from "@/components/ui/logo-cloud-004"
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}
    />
  )
}