Single Marquee With Claim Logos Block for React

Edit CUSTOMERS at the top of the file. Each entry is a name, an icon (any Lucide icon) and a lettering, the Tailwind classes for the name's type. Eight to twelve fill the row without a visible repeat on a wide screen; the row repeats itself to loop. The names are fictional placeholders for your own customers.

Yes. The button at the end of the row pauses and resumes it and reports its state with aria-pressed. The row also pauses while the pointer is over it or focus is inside it. The button isn't shown with reduced motion, because the row doesn't move then.

The row stops, its fade is removed and it becomes a row you scroll by hand, with only the first copy of the list. The entrance transition is off too.

Yes. It is a named region, "Customer logos", whose first copy is read once; the copies that make the loop are hidden from assistive technology and taken out of the tab order. Each wordmark is text, and the icons are hidden. The pause button has a name and a visible focus ring, and the row can be paused by keyboard.

From lg the claim and the row are two columns, the row's side drawing the divider with + marks where it meets the top rule. The padding sits on the cells, so the divider reaches the top rule. Below lg the divider becomes a rule across the top of the row.

The claim moves to the right, the row scrolls the other way and fades toward the end side, and each wordmark keeps its own direction, as a logo would.