Animated Mosaic Team Block for React

Edit PEOPLE and OPEN_SEATS at the top of the file. A person is a name and a role; the initials come from the name. Eight people fill the three-by-three mosaic around the invitation; the first six are the ones a phone shows, set by PHONE_COUNT. Change the invitation's number when you change your list of open roles: it is a plain constant, not counted from anything.

Every person's cell is a link. Hovering it, or focusing it with the keyboard, fades the initials out and the name and role in. A screen reader doesn't depend on the fade: each cell has a visually hidden heading with the name, the role as text and the link's own name ("Anya Volkova's profile"), and the faded layers are hidden from assistive technology. Point the links at your profile pages.

The reveal is only for a mouse on a screen at least sm wide. Anywhere else the two layers stack, with the initials above and the name and role below, so nothing needs a hover. A phone shows six people in two columns; a tablet shows all eight.

The fade is a CSS transition and it is off with reduced motion: hovering or focusing a cell still swaps the initials for the name, instantly. The header and the mosaic fade up once when the page loads, and that is off too.

It is a link (href="#"): point it at your open roles. It is a Shine Button, so a band of light sweeps across it once on hover and keyboard focus, and it is the only primary control in the block. The button renders the link it is given with render, with nativeButton={false}.

The grid has a one-pixel gap on a border-coloured background and every cell is a background-coloured box, so the gaps show as the hairlines. The rails and the top rule come from the page's spine and Guides; the block draws no rule at its foot, because the next block's top rule closes it. The invitation cell takes a solid, slightly darker tint, never a translucent one, so the lines stay crisp around it.