Shadcn UI Logos Block
Logos17 is a logo cloud section with a centered heading and two rows of company logos. The top row displays 4 logos and the bottom row displays 5 logos in a grid layout. On desktop, logos are static with hover opacity effects. On mobile, logos animate in a marquee pattern with the two rows scrolling in opposite directions.
The visual treatment is minimal with logos displayed at reduced opacity (50%) that increases on hover. Logos use dark:invert to work in both light and dark modes. The heading includes a main line and a secondary line in muted foreground color. Generous spacing between rows and logos creates an airy feel.
This logo cloud follows the mainline design system aesthetic with its clean layout and subtle interactions. The two-row arrangement with different column counts creates visual interest. The marquee animation on mobile keeps the section engaging without taking up too much vertical space.
On mobile, the static grid is replaced with react-fast-marquee for smooth infinite scrolling. The top row scrolls left and the bottom row scrolls right, creating a dynamic effect. Marquee pauses on hover for accessibility.
Dependencies
| Package | Type |
|---|---|
| react-fast-marquee | NPM |