Vertical Scroll Reveal Grid Logos Block for React

Edit FIRST, SECOND and THIRD at the top of the file: each entry is an icon, a name, the lettering classes and where the icon sits (mark). COLUMNS says which list is which column, whether it runs down (reverse) and how fast. Keep names short: on a phone each column is about 120 pixels wide.

Four ways: the pause button next to the main button (its label changes between "Pause the columns" and "Resume the columns"), hovering a column, moving keyboard focus into one, and the reduced-motion setting, which stops all three and leaves each as a column you can scroll by hand. The button is hidden under reduced motion because there is nothing left to pause.

It's a link (href="#"): point See a sample rota at your demo. The button renders the link it's given with render, with nativeButton={false}.

The panel goes under the copy, with a rule between them, and shows two columns; the third column is for screens from sm up. The panel is a fixed height, so the page doesn't grow while the logos move.

Yes. The cells are your page's background with hairlines, the names are muted-foreground and turn to the foreground on hover, and the fade is a mask, so it works on any background. Nothing is a fixed colour; the only primary element is the Shine Button.