Badges Marquee Banner Block for React

Three ways. Hovering or focusing the row holds it while the pointer or focus is there; the pause button before the row stops it until pressed again (its label stays "Pause the scrolling runtimes" and its pressed state says whether it is paused); and with reduced motion turned on in the system the row doesn't animate at all and the button is hidden. That covers WCAG 2.2.2 for content that moves automatically for more than five seconds.

Edit TARGETS at the top of the file, a list of plain strings. Version numbers like "Node 22" and "Bun 1.2" are compatibility data, which is the one place a real product name belongs in a banner; keep them true, and remove them from the list if you'd rather use generic words. Eight badges fill a wide screen; the row repeats itself automatically if yours is shorter than the strip.

Yes, on the Marquee: speed is in pixels per second (36 here) and reverse flips the direction. The sibling Tags Marquee Banner does that. In a right-to-left page the row reads and moves from the other side on its own.

It stops and becomes a row you can scroll sideways by hand, with the repeated copy hidden so each badge appears once and the edge fade removed so the first and last badges aren't dimmed. The pause button hides because there is nothing to pause.

The "Works with" cell and its button stay at the start, and the badges scroll in the width that's left. The strip stays one line, 44 pixels tall, at every width.