A página de destino abre com uma porta a fechar-se, uma caminhada até à secretária, um chão e um teto a surgir em fade, um quadro de giz a cair para o lugar, um letreiro pendurado e, por fim, um relógio de parede a começar a mover o ponteiro dos segundos — sete momentos num calendário fixo: porta aos 0,5s, caminhada aos 0,75s, chão aos 2s, teto aos 2,15s, quadro aos 2,35s, letreiro aos 2,6s, relógio aos 2,7s. Nada dessa sequência é orquestrado em JavaScript. Cada momento é uma animação CSS por keyframes com o seu próprio animation-delay, e a "coreografia" não é mais do que sete atrasos escolhidos para caírem pela ordem certa. Há uma pequena seta circular no canto que repete tudo ao ser clicada, e a parte interessante é que o seu código não faz a mínima ideia de que nada disto é verdade.
Uma chamada, não sete
Um botão de repetição ingénuo precisaria de conhecer todos os elementos com uma animação, reiniciar cada um deles, e manter essa lista sincronizada sempre que um novo momento fosse adicionado à introdução. Este não faz isso. Chama hero.getAnimations({ subtree: true }) — uma API do navegador que devolve todas as Web Animations em execução dentro do elemento hero, sejam elas quais forem — e, para cada uma que recebe, chama .cancel() e depois .play(). É todo o handler. Adicionar um oitavo momento à introdução mais tarde não exige nenhuma alteração a esta função; o navegador simplesmente devolverá mais uma animação da próxima vez que o botão for clicado, porque a função nunca as contou à partida.
Antes de qualquer coisa disto correr, o código verifica se hero.getAnimations sequer existe e, se não existir, esconde o botão em vez de associar o handler de clique. Um botão visível que não faz nada num navegador mais antigo é pior do que nenhum botão — convida a um clique e depois falha silenciosamente em cumprir, o que é um erro pior do que simplesmente não oferecer a funcionalidade.
Os mesmos sete momentos nunca chegam a ecrãs pequenos
Abaixo dos 900 pixels de largura, a sala de aula deixa de ser um diorama visto de lado e passa a empilhar-se verticalmente, e a introdução que aí corre não é uma versão encurtada da de desktop — é uma sequência diferente e mais curta, com menos momentos: teto aos 0s, chão aos 0,2s, quadro aos 0,25s, professor aos 0,65s, legenda aos 1,05s. A porta, o relógio de parede e o próprio botão de repetição ficam simplesmente escondidos em ecrãs pequenos — o letreiro que paira sobre a lição no desktop já não tem onde pendurar-se assim que o quadro passa a ocupar toda a largura, por isso segue o destino da porta e do relógio, em vez de ficar cortado de forma estranha. O telemóvel não recebe uma versão mais rápida do mesmo espetáculo de sete momentos. Recebe um espetáculo de cinco momentos, construído para o layout em que está realmente a correr.
O que acontece quando o movimento é desligado
Uma única regra global reduz a duração de todas as animações e transições do site para praticamente zero no momento em que o dispositivo de um visitante pede prefers-reduced-motion: reduce. Para o hero, isso significa que a porta, a caminhada, o chão, o quadro, o letreiro e o relógio não decorrem num cronograma comprimido — resolvem-se para o seu estado final praticamente de imediato, porque não existe uma versão encurtada da sequência escondida atrás da versão completa. Essa é uma escolha de design real, com um compromisso real: algumas diretrizes de acessibilidade preferem manter uma transição breve mas ainda presente em vez de um corte abrupto, com base na ideia de que uma mudança de cena repentina pode, por si só, ser perturbadora. Escolhemos a garantia mais simples — uma definição de animação respeitada por completo, sem qualquer movimento residual que alguém precisasse de verificar — em vez de uma versão parcialmente reduzida que exigiria os seus próprios testes para confirmar que era, de facto, suave o suficiente.
Do que ainda não temos a certeza
Element.getAnimations() tem hoje suporte alargado nos navegadores atuais, mas nem sempre teve, e é exatamente por isso que o botão a verifica e desaparece em vez de presumir que está disponível — um pequeno hábito tão instrutivo quanto funcional, mas que significa que um número reduzido de visitantes em navegadores antigos não vê botão de repetição nenhum, em vez de uma versão degradada. Não tentámos quantificar quantas pessoas são realmente essas, porque, para a introdução decorativa de um site de marketing, a resposta honesta é que provavelmente não vale o tempo de engenharia para descobrir.