Logos Carousel

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

Credits

• Devouring Details