Patterns

Logo loop

An infinite, seamlessly looping horizontal strip of logos passed as data.

Install

npx shadcn@latest add @alix/logoLoop

Preview

Usage

<LogoLoop
  logos={[
    { src: "/next.svg", alt: "Next.js" },
    { src: "/vercel.svg", alt: "Vercel" },
    { src: "/globe.svg", alt: "Globe" },
  ]}
  speed={40}
  gap="xl"
  className="py-4"
/>

Examples

Edge-to-edge, no fade

Turn the gradient mask off (fade={false}) when the strip sits inside a bordered band that already contains it.

<LogoLoop
  logos={logos}
  speed={70}
  gap="lg"
  fade={false}
  className="border-y border-border py-4"
/>

Larger marks, slower drift

Raise logoHeight and drop the speed for a calmer, more prominent brand wall on a marketing hero.

<LogoLoop
  logos={logos}
  speed={24}
  gap="xl"
  logoHeight={48}
  className="py-6"
/>

In a labelled section band

A quiet caption above the strip frames it as a partner wall; the loop stays seamless whatever the logo count.

Trusted across restructuring, transactions, and disputes engagements

<div className="mx-auto w-full max-w-3xl bg-muted px-6 py-8">
  <p className="mb-6 text-center text-sm text-muted-foreground">
    Trusted across restructuring, transactions, and disputes engagements
  </p>
  <LogoLoop logos={logos} speed={40} gap="xl" />
</div>

When to use it

Use it for

A continuously scrolling client or partner logo wall on a marketing page.
A brand strip that stays seamless whether you feed it four logos or forty.
Link each mark to the client (href) when the wall doubles as a reference index.

Reach for something else

A fixed, countable grid of partner logos — use Logos instead.
A single wordmark or the product mark — use Logo instead.
Rotating screenshots or imagery with controls — use MediaCarousel instead.

Props

Prop	Type	Default	Description
logos	Array<{ src: string; alt: string; href?: string }>	—	The logo image data. The strip renders the images, optional links, and duplicate copies that form the loop.
speed	number	60	Scroll speed in pixels per second, constant regardless of how many logos are in the strip, so adding logos slows nothing down.
gap	"none" \| "xxs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl"	"xl"	Gap between logos, from the shared spacing scale.
logoHeight	number	32	Pixel height each logo is normalized to.
pauseOnHover	boolean	true	Pause the scroll while the pointer is over the strip.
fade	boolean	true	Fade the left and right edges with a gradient mask.