Dual Row Marquee Logos Block for React Aria

Edit FIRST_ROW and SECOND_ROW at the top of the file: each entry is a Lucide icon, a name, a lettering (the name's type classes) and a mark (inline, badge, ring or trailing, where the icon sits). Keep eight or more per row: the rows fill the width on their own, but a shorter row would show the same logo twice at once. Neighbours should differ in lettering and mark.

Change SPEED (pixels a second, 28 by default); both rows read it. Give a row its own number if you want them to drift apart, and flip a row's direction with its reverse prop.

Four ways: the pause button in the header (a toggle with aria-pressed that stops both rows), hovering a row, moving keyboard focus into a row, and the visitor's reduced-motion setting. With reduced motion both rows stop and become rows you can scroll by hand, the looping copies are removed, and the pause button is hidden because there is nothing left to pause.

Each row is a region named "Customer logos, first row" or "second row". The first copy is the real content: each wordmark has the customer's name as text and a decorative icon. The repeated copies that make the loop are hidden from assistive technology and can't be focused. The header's h2 is the block's only heading.

Yes. Wordmarks are the muted foreground colour and turn to the foreground on hover; the edges fade by a mask into whatever is behind the band, so nothing is a fixed colour and primary isn't used.

The marquee stays a marquee at every width. The header's padding makes room for the pause button at its end, the heading wraps onto three lines at 320 pixels, and nothing scrolls sideways.