Logos Carousel
Cycle through logos column by column in a staggered wave.
Installation
pnpm dlx shadcn@latest add @ncdai/logos-carousel
Usage
import { LogosCarousel } from "@/components/logos-carousel"<LogosCarousel>
<Logo />
<Logo />
<Logo />
</LogosCarousel>Accessibility
Reduced motion
When prefers-reduced-motion is on, the slide and blur transitions are replaced by a plain opacity cross-fade. The logos still cycle, so no logo is dropped.
Auto-updating content
The carousel cycles indefinitely, pausing only while the page is hidden or the carousel is off screen. WCAG 2.2.2 Pause, Stop, Hide asks for a way to pause, stop, or hide auto-updating content that runs alongside other content. Either add a pause control, or keep the carousel decorative and make sure the same logos are reachable somewhere static on the page.
API reference
LogosCarousel
Prop
Type