Logos Flip

Features

• Cycles through every logo over time.
• Pauses while the page is hidden or the grid is off screen.

Installation

pnpm dlx shadcn@latest add @ncdai/logos-flip

Usage

import { LogosFlip } from "@/components/logos-flip"

<LogosFlip>
  <Logo />
  <Logo />
  <Logo />
  <Logo />
  <Logo />
</LogosFlip>

Set --column-count to wrap the cards onto fewer columns:

<LogosFlip className="[--column-count:2] sm:[--column-count:4]">...</LogosFlip>

Accessibility

Reduced motion

With prefers-reduced-motion, the cards swap in place instead of flipping.

Auto-updating content

The flip runs on its own, so WCAG 2.2.2 Pause, Stop, Hide applies. Either add a pause control, or mark it aria-hidden and list the same logos statically elsewhere on the page.

API reference

LogosFlip

Credits

• Cursor