Fast and Slow Dual Marquee Logos Block for React

NEAR_SPEED and FAR_SPEED at the top of the file are in pixels a second (20 and 60). The loop time is the row's width divided by its speed, so the near row's large names take about eighty seconds a loop and the far row's about a third of that. Keep the near row slower than the far one so the depth reads.

Each row's customers carry their own lettering, and the near row's are larger (text-3xl, text-2xl). The marks come from LARGE_MARKS for the near row and MARKS for the far one, so an icon grows with its name. The near row is also given more room between names and between the rows.

Four ways: the pause button above the rows (a toggle with aria-pressed that stops both), hovering a row, focusing into a row, and the visitor's reduced-motion setting, which stops both rows and leaves them as rows you can scroll by hand. The pause button is hidden with reduced motion.

The rows are regions named "Customer logos, large and slow" and "Customer logos, small and fast". The first copy holds each customer's name as text with a decorative icon; the looping copies are hidden from assistive technology and can't be focused.

Yes. Names are the muted foreground colour and turn to the foreground on hover, the ends fade by a mask, and nothing is a fixed colour.