Single Row Marquee Logos Block for React

Edit CUSTOMERS at the top of the file: each entry is an icon, a name, the lettering classes and where the icon sits (mark: inline, badge, ring or trailing). Give each customer its own lettering so the row doesn't read as one font, and keep names to about ten letters.

Four ways: the pause button at the end of the band (a toggle with aria-pressed), hovering the row, moving keyboard focus into it, and the reduced-motion setting, which stops the row and leaves it as a row you can scroll by hand. The button is hidden under reduced motion because there is nothing left to pause.

Change speed on the Marquee: it's in pixels per second, so a larger number is faster. The gap between logos is spacing. The row loops by repeating itself, so any number of customers works.

The marquee is named "Customer logos". The first copy is the real list: each logo 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 logos aren't links or buttons, so they aren't tab stops.

Yes. Names and icons are muted-foreground and turn to the foreground on hover, filled badges use the current text colour, and the fade is a mask. Nothing is a fixed colour and primary isn't used.