Sé que hay preguntas similares por aquí en SO, pero no pude encontrar ninguna que abordara mi caso.

Estoy usando React y tengo un componente que mapea sobre una matriz y representa sus elementos como una lista. Se muestran uno al lado del otro y la idea es que cuando seleccione uno de ellos, el que es === params (obtenido a través de useParams) se posicione en el medio y se amplíe. Digamos que tengo esto cuando no se selecciona nada:

Canciones Artistas Álbumes

Cuando selecciona Canciones, se encuentra a continuación (estoy usando negrita para simular un aumento de tamaño, pero la idea es que la palabra sea realmente más grande, como si cambiara la fuente de, digamos, 20px a 30px):

Álbumes Canciones Artistas

Lo mismo ocurre cuando selecciona Artistas (o Álbumes, para el caso):

Artistas Álbumes Canciones

La transición debe ser animada. La lista se puede rotar (manteniendo el orden de los elementos) o simplemente mover el seleccionado al centro, lo que sea más fácil de lograr.

Entonces, ¿alguna sugerencia?