Tengo un componente particular para la página de inicio de mi aplicación que tiene una animación css genial para cambiar los colores. Pasa por 3 colores para un total de 120s.

Aunque tengo un problema... Cada vez que voy a otra página, por ejemplo voy a la ruta /blog y luego decido volver a la página de inicio, este componente comenzará su animación desde el principio.

Dado que es un componente de 100vw 100vh, es bastante obvio que se vuelve a renderizar. Mi idea es hacerlo de modo que no se vuelva a renderizar y la animación siempre se ejecute en segundo plano, sin importar en qué página se encuentre.

Traté de envolverlo con React.memo, pero eso no funcionó. Estoy abierto a ideas y agradecería cualquier comentario. ¡Gracias!