Logo carousel

A quiet, repeating logo carousel. Four fixed positions cycle through logos with an upward slide, a soft blur, and a left-to-right stagger.

Logo carousel

Logos settle into place before the next set appears. Hover to pause the animation.

<LogoCarousel
  items={logos}
  columns={4}
  speed={1.4}
  itemClassName="grayscale brightness-0"
/>

Responsive positions

Use mediumColumns when the wide layout needs more positions than medium and small screens can comfortably support. The carousel switches cleanly when the viewport crosses 768px.

<LogoCarousel
  items={logos}
  columns={6}
  mediumColumns={4}
  itemClassName="grayscale brightness-0"
/>

Slower pacing

Set speed to the seconds between logo sets. A higher value gives each set more time to rest; the transition stays quick and soft.

Usage

import LogoCarousel from "../../components/LogoCarousel";

Prop	Default	Description
`items`	Required	Array of logo elements. Give each image descriptive alt text.
`columns`	`4`	Number of fixed logo positions. Positions wrap into two columns on small screens.
`mediumColumns`	`columns`	Number of positions used at widths of 768px and below.
`speed`	`1.4`	Seconds between sets, with a minimum of one second. Previously this controlled a full horizontal scroll.
`itemClassName`	`""`	Classes applied to each logo, such as monochrome styling.

The background is transparent, so the carousel works inside an existing homepage section. Reduced-motion preferences show every logo in a static, wrapping layout. Screen readers receive one stable copy of the complete logo list.