Reverse Direction Single Marquee Logos Block for React

It's a SegmentGroup named "Direction of the row", with Forward and Backward. The selected value is state in the block, and the Marquee gets reverse when Backward is chosen. Forward is the usual ticker, moving toward the start of the line; Backward moves toward the end. The row starts on Backward, so change useState("backward") for a different default.

Four ways: the pause button next to the switch (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. Under reduced motion the switch and the button are hidden, because there is nothing left to steer or pause.

Yes, a little. The direction is a CSS animation direction, so turning the row around mirrors its position in the loop. The row keeps scrolling from there at the same speed.

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.

The switch and the pause button go under the heading, and the row keeps scrolling at every width. Nothing scrolls sideways at 320 pixels except the row itself.