Logos Flip
Flip cards in a staggered wave to reveal the next batch of logos.
- Dependencies (1)
Features
- Cycles through every logo over time.
- Pauses while the page is hidden or the grid is off screen.
Use cases
- Trusted-by section on a landing page.
- Sponsor or partner grid with more logos than fit at once.
- Customer logos near a pricing table.
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
Prop
Type
Credits
License and usage
- Free to use and modify in both personal and commercial projects.
- Attribution is appreciated but not required.
- Released under the MIT License.