Dual Marquee Monogram Row Logos Block for React

Edit FIRST_ROW and SECOND_ROW at the top of the file: each entry is the initials drawn on the tile and the name that screen readers read. Keep the initials to two letters so the tiles stay square, and keep the rows about the same length so they take the same time to loop.

Four ways: the pause button in the header (a toggle with aria-pressed that holds both rows at once), hovering a row, moving keyboard focus into one, and the reduced-motion setting, which stops both rows and leaves each as a row you can scroll by hand. The button is hidden under reduced motion because there is nothing left to pause.

The second Marquee has the reverse prop. Both take the same speed, so the rows drift apart evenly. Change speed on each, in pixels per second, for a slower or a lopsided pair.

The two letters are decorative, so they are hidden from assistive technology, and the customer's full name sits next to them as screen-reader-only text. The tiles aren't links or buttons, so they aren't tab stops, and the repeated copies the loop needs are hidden and inert.

Yes. The tiles are bg-card with a border, and the letters are muted-foreground and turn to the foreground on hover. The ends fade by a mask into whatever is behind the band. Nothing is a fixed colour and primary isn't used.

Both rows keep scrolling at every width; the tiles don't change size. The header's button stays at the end of the heading row, and nothing scrolls sideways at 320 pixels except the rows themselves.