Shuffle Pairs Coffee Match Team Block for React

Random pairings differ between the server and the browser, which makes the page flash and fail to hydrate, and a random shuffle can repeat a pair twice running. The block steps through a fixed rota instead (the circle method): one person stays put and the other five move one place round a ring each round. Over five rounds all fifteen possible pairs happen once, and the sixth press returns to the first round.

Edit PEOPLE and STARTERS at the top of the file. The rota is built for six people and three pairs; the pairs of a round come from pairsOf, and ROUNDS is the number of rounds before the rota starts again (one fewer than the number of people). For a different team size, change both. The starter for each pair comes from starterOf: three a round, so the list's length is best kept off a multiple of three.

No. This is a block, not a scheduling tool. The line under the cells says the pairs are examples and no invitations are sent. To use it for real, call your own code from shuffle and replace the rota with pairs from your server.

A polite status line names the new round and its pairs ("Round 2 of 5: Amara and Jun, Priya and Lucia, Tomas and Kofi."), and the cells change in the same place in the page, so a reader that moves to them finds the new pairs. Each cell is a list item with an h3 for the pair, and its two people in a list; the avatars are decoration.

When the round changes, the new pairs fade up over a third of a second with a CSS animation. With reduced motion there is no animation and the pairs simply change. The Shine Button's light sweeps once on hover and focus, or fades in under reduced motion. Nothing moves by itself.

No. Every cell keeps the same height: the starter has room for three lines on narrow cells, two on wide ones, so a longer question never pushes anything.

The three cells stack one above the other, each full width with the same padding, and the header and button stay centred above them.