Dual Row Marquee Metric Logos Block for React

They are in the h2: the figure is a bdi in a large span, and the sentence under it is a second span, with its bold lead in the foreground colour. Replace the text; keep the figure in its bdi so a right-to-left layout doesn't move the plus sign. The figure is the heading's first words, so a screen reader reads "12,400+ teams run their tests on Goldcrest" as one heading.

Edit FIRST_ROW and SECOND_ROW at the top of the file. Each entry is a name, an icon (any Lucide icon), a lettering and a mark: the lettering is the Tailwind classes for the name's type, and the mark places the icon (inline, badge, ring, trailing or stacked). Keep eight or more per row, so the row is wider than the page and the loop has nothing to show but logos. The names are fictional placeholders for your own customers.

Yes, in three ways. The button above the rows pauses both and turns into a play button (it keeps its pressed state for assistive technology). Hovering a row or focusing inside it pauses it too. Under reduced motion the rows don't move at all: they stand still and can be scrolled by hand, and the button is hidden because there is nothing left to pause.

The second row is a reversed marquee with a different speed (28 and 36). Two rows at one speed in one direction read as a single wide strip; opposite directions and different speeds make them two bands. Remove reverse from the second row, and set both speeds the same, if you want them in step.

Each row is a named marquee ("Customers, first row", "Customers, second row"). The looping copies the marquee adds are hidden from assistive technology and inert, so they take no tab stop and the names are read once. The pause button is the only control in the block, named "Pause the scrolling logos", and shows a visible focus ring.

The figure steps down from text-7xl to text-6xl, the sentence wraps in a narrow column, and the two rows keep scrolling at any width with their ends faded by a mask. Nothing scrolls the page sideways at 320 pixels.