Animated Grid Awards Block for React

The list is a group, and each cell's link reads :has() on it: while any link inside the list is hovered or focused, the others take a solid tint, and the one that is hovered or focused takes the card tone and a ring on top of that. It is a plain colour change, so nothing flickers and nothing is mounted or unmounted. The tint is a solid mix of your muted and background tokens rather than a reduced opacity, which keeps the text of the settled cells at full contrast.

Dimming only applies to a fine pointer (a mouse or trackpad), so on a phone every cell stays as it is. Keyboard focus lifts the focused cell the same way hover does, with a stronger ring, and the other cells settle too. Every cell is a real link, so Tab reaches each one in reading order.

The first row fades up once on load, one cell after the next, and the medal grows slightly when its cell is hovered. The colour changes ease over 200 milliseconds. With reduced motion the entrance, the growth and the easing are all off: the cell changes colour instantly and nothing moves.

Edit AWARDS at the top of the file: a title, the programme, a fixed year and a mark. medalWith takes a motif for the medal's face (a star, a plus, a chevron, a dot, bars or a diamond are in the file); add your own as a list of path strings. Six cells fill the grid at every width (three across, then two); for another count keep it a multiple of two and three, or the last row will leave a gap.

No. Nimbusworth, Anvilmere, Elderbank, Foxlowe, Hartsedge and Ivywell are made-up programmes and Courseline a made-up kit. The medals are drawn by the block. If you show a real award, use its name in text and its official badge only where its rules allow it.

Two columns of three rows, with the medal, the title and the foot of each cell stacked, and nothing scrolls sideways at 320 pixels. The header stacks with the tally under the sentence. In a right-to-left layout the order mirrors and the arrow flips to point up and to the start.