Icon Only Single Marquee Logos Block for React

Edit CUSTOMERS at the top of the file: each entry is a Lucide icon and a name. The name feeds the label and the screen-reader text. Add or remove as many as you like, the loop adapts, but keep the icons different so the tiles can be told apart.

Four ways: the pause button next to the line (a toggle with aria-pressed), hovering the strip, moving keyboard focus into it, and the user's reduced-motion setting, which stops the scrolling altogether and leaves the tiles as a row you can scroll by hand. The pause button is hidden when motion is reduced because there is nothing left to pause.

The marquee loops by repeating the row. The copies after the first are inert so assistive technology and the keyboard skip them, and an inert copy can't be hovered, so only the original tiles show their label. The names are always available as text, and hovering anywhere over the strip pauses it so you can move to an original. The label is plain CSS under the tile, inside the strip, so the marquee's edge never clips it.

The marquee is named "Customer logos". The first copy is the real list: each tile has the customer's name as text and a decorative icon. The repeated copies are hidden from assistive technology and can't be focused. The tiles aren't links or buttons, so they aren't tab stops.

Yes. Tiles are bg-muted with a faint ring and muted-foreground icons that turn to the foreground on hover, and the edges fade by a mask into whatever is behind the strip. Nothing is a fixed colour and primary isn't used.