Docs·Logo Cloud 003

Logo Cloud 003

CSS-only logo carousel with vertical slide, blur enter/exit, and configurable group size.

Installation

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

Usage

Pure CSS @keyframes — no animation library. Logos split into groups of count; outgoing groups slide up with blur while incoming groups rise from below.

SVG logos: svgl.

API Reference

PropTypeDefault
logosLogo entries with a display name and SVG node.
LogoCloud003Item[]—
labelOptional heading above the carousel.
string—
countLogos shown per group.
number4
staggerPer-item animation stagger in seconds.
number0.1
durationEnter/exit animation duration in milliseconds.
number500
intervalMilliseconds between group cycles.
number2500
initialDelayMilliseconds before the carousel starts cycling.
number800
classNameClasses on the outer section.
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

Trusted by leading teams

import { LogosCarousel } from "@/components/ui/logo-cloud-003"
const logos = [
  { name: "Vercel", svg: <VercelLogo /> },
  { name: "Stripe", svg: <StripeLogo /> },
  { name: "Clerk", svg: <ClerkLogo /> },
  { name: "Linear", svg: <LinearLogo /> },
]

export default function Page() {
  return (
    <LogosCarousel
      logos={logos}
      label="Trusted by leading teams"
      count={3}
      interval={2500}
    />
  )
}