Marquee Team Block for React

Edit ROASTERY and PORTAL at the top of the file: a person is a name and a role. Each row is a Marquee that fills the width by repeating its people, so seven people per row loop without a gap; with only two or three, the same faces repeat more often. The heading's count comes from the two arrays' lengths.

Yes. The pause button at the end of the first row stops both rows and is a toggle that reports whether it is pressed. The rows also stop while a pointer is over them or a keyboard focus is inside them. Under reduced motion the rows never start and the button is hidden, because there is nothing left to pause.

Once. The moving rows are decoration, so they are hidden from assistive technology (and their looping copies are taken out of the tab order); a visually hidden list right before them names each person and role, with the name as a heading. Nothing in the band can take focus except the pause button.

The rows stay still and become ordinary scrollable strips, the fade at the ends is removed so the first and last people aren't hidden, and the looping copies are removed so nobody appears twice. The pause button is hidden.

The spine's top rule and the band's own rule come from Guides, with + marks where each meets the rails; a second rule between the two rows shares the same marks. Nothing is drawn under the band, because the next block's top rule closes it.

Yes. The rows, the pills and the pause button follow the page direction, and the two rows still run opposite ways.