La página de inicio arranca con una puerta que se cierra, un paseo hasta el escritorio, un suelo y un techo que aparecen con un fundido, una pizarra que cae en su sitio, un cartel que cuelga y, por último, un reloj de pared que echa a andar su segundero — siete compases en un calendario fijo: puerta a los 0,5s, paseo a los 0,75s, suelo a los 2s, techo a los 2,15s, pizarra a los 2,35s, cartel a los 2,6s, reloj a los 2,7s. Nada de esa secuencia está orquestado en JavaScript. Cada compás es una animación CSS por fotogramas clave con su propio animation-delay, y la «coreografía» no es más que siete retrasos elegidos para caer en el orden correcto. Hay una pequeña flecha circular en la esquina que repite todo el conjunto al hacer clic, y lo interesante es que su código no tiene ni idea de que nada de lo anterior es cierto.
Una llamada, no siete
Un botón de repetición ingenuo tendría que conocer cada elemento con una animación, reiniciarlos uno por uno, y mantener esa lista sincronizada cada vez que se añade un compás nuevo a la introducción. Este no hace eso. Llama a hero.getAnimations({ subtree: true }) — una API del navegador que devuelve todas las Web Animations en marcha en cualquier lugar dentro del elemento hero, sean las que sean — y por cada una que recibe, llama a .cancel() y luego a .play(). Eso es todo el manejador. Añadir un octavo compás a la introducción más adelante no exige ningún cambio en esta función; el navegador simplemente devolverá una animación más la próxima vez que se pulse el botón, porque la función nunca las contó de entrada.
Antes de ejecutar nada de eso, el código comprueba si hero.getAnimations existe siquiera, y si no existe, oculta el botón en lugar de conectar el manejador del clic. Un botón que es visible pero no hace nada en un navegador antiguo es peor que ningún botón — invita a hacer clic y luego, calladamente, no cumple, lo cual es un fallo peor que no ofrecer la función en absoluto.
Esos mismos siete compases nunca llegan a las pantallas pequeñas
Por debajo de 900 píxeles de ancho, el aula deja de ser un diorama visto de lado y se apila verticalmente, y la introducción que se ejecuta ahí no es una versión abreviada de la de escritorio: es una secuencia distinta y más corta, con menos compases: techo a los 0s, suelo a los 0,2s, pizarra a los 0,25s, profesor a los 0,65s, texto a los 1,05s. La puerta, el reloj de pared y el propio botón de repetición se ocultan directamente en pantallas pequeñas — el cartel que cuelga sobre la lección en escritorio no tiene de dónde colgar una vez que la pizarra ocupa todo el ancho, así que corre la misma suerte que la puerta y el reloj en lugar de recortarse de forma torpe. El móvil no recibe una versión más rápida del mismo espectáculo de siete compases. Recibe un espectáculo de cinco compases construido para el diseño en el que realmente se ejecuta.
Qué pasa cuando se desactiva el movimiento
Una única regla global reduce la duración de todas las animaciones y transiciones del sitio a prácticamente cero en el momento en que el dispositivo de un visitante solicita prefers-reduced-motion: reduce. Para el hero, eso significa que la puerta, el paseo, el suelo, la pizarra, el cartel y el reloj no se reproducen en una línea de tiempo comprimida — pasan a su estado final prácticamente de golpe, porque no hay una versión abreviada de la secuencia escondida detrás de la completa. Es una decisión de diseño real con una contrapartida real: algunas pautas de accesibilidad prefieren mantener una transición breve pero presente en lugar de un corte seco, bajo la teoría de que un cambio de escena repentino puede resultar sobresaltante en sí mismo. Nosotros elegimos la garantía más sencilla — un ajuste de animación que se respeta por completo, sin ningún movimiento residual que nadie tenga que comprobar — antes que una versión parcialmente reducida que necesitaría sus propias pruebas para confirmar que en verdad era lo bastante suave.
De lo que todavía no estamos seguros
Element.getAnimations() tiene un soporte amplio en los navegadores actuales, pero no siempre lo tuvo, que es justo por lo que el botón comprueba si existe y desaparece en lugar de dar por hecho que está ahí — un pequeño hábito tan instructivo como funcional, pero que significa que un pequeño número de visitantes con navegadores antiguos no ven ningún botón de repetición, en lugar de una versión degradada. No hemos intentado calcular cuánta gente es realmente esa, porque para la introducción decorativa de un sitio de marketing, la respuesta honesta es que probablemente no vale la pena el tiempo de ingeniería que costaría averiguarlo.