Inset Dual Marquee Logos Block for React

Edit FIRST_ROW and SECOND_ROW at the top of the file: each entry is a Lucide icon, a name, a lettering and a mark. Keep eight or more per row so the rows fill the panel without repeating a logo in view.

The two rows sit in one box with a vertical mask (mask-image) that is solid at the top and transparent near the foot, with space left under the rows. The button isn't inside that box: it is placed over the foot of the panel, so it is never masked and always reads on clean card. Change the two stops in the mask to fade sooner or later, and the box's bottom padding to give the button more room.

It is a link (href="#"): point it at your customer stories. It renders the link it's given with render, with nativeButton={false}.

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

It follows your theme: no dark scope, so it's light on a light page and dark on a dark one. The shell, the shadow and a ring keep it separate from the page in both modes, and the rows fade by masks into the card's own colour.

Each row is a region named "Customer logos, first row" or "second row"; the first copy holds each customer's name as text, and the looping copies are hidden from assistive technology and can't be focused.