La landing page si apre con una porta che si chiude, una camminata verso la cattedra, un pavimento e un soffitto che compaiono in dissolvenza, una lavagna che scatta al suo posto, un'insegna appesa e infine un orologio da parete che avvia la sua lancetta dei secondi — sette battute su una tabella di marcia fissa: porta a 0,5s, camminata a 0,75s, pavimento a 2s, soffitto a 2,15s, lavagna a 2,35s, insegna a 2,6s, orologio a 2,7s. Nessuna parte di questa sequenza è orchestrata in JavaScript. Ogni battuta è un'animazione CSS a fotogrammi chiave con il proprio animation-delay, e la "coreografia" non è altro che sette ritardi scelti per arrivare nell'ordine giusto. C'è una piccola freccia circolare nell'angolo che rimanda in onda tutto quanto al clic, e la parte interessante è che il suo codice non ha idea che nulla di tutto ciò sia vero.
Una chiamata, non sette
Un pulsante di replay ingenuo dovrebbe conoscere ogni elemento animato, riavviarli uno a uno e tenere quella lista sincronizzata ogni volta che si aggiunge una nuova battuta all'introduzione. Questo non funziona così. Chiama hero.getAnimations({ subtree: true }) — un'API del browser che restituisce ogni Web Animation in esecuzione ovunque all'interno dell'elemento hero, qualunque essa sia — e per ciascuna ottenuta chiama .cancel() e poi .play(). Questo è l'intero gestore. Aggiungere in futuro un'ottava battuta all'introduzione non richiede alcuna modifica a questa funzione; il browser restituirà semplicemente un'animazione in più al prossimo clic sul pulsante, perché la funzione non le ha mai contate fin dall'inizio.
Prima che tutto questo venga eseguito, il codice controlla se hero.getAnimations esiste affatto, e se non esiste nasconde il pulsante invece di collegare il gestore del clic. Un pulsante visibile ma che non fa nulla su un browser datato è peggio di nessun pulsante — invita al clic e poi silenziosamente non mantiene la promessa, il che è un fallimento peggiore che non offrire affatto la funzione.
Le stesse sette battute non arrivano mai agli schermi piccoli
Sotto i 900 pixel di larghezza, l'aula smette di essere un diorama visto di lato e si impila verticalmente, e l'introduzione che gira lì non è una versione abbreviata di quella desktop — è una sequenza diversa e più corta, con meno battute: soffitto a 0s, pavimento a 0,2s, lavagna a 0,25s, insegnante a 0,65s, didascalia a 1,05s. La porta, l'orologio da parete e lo stesso pulsante di replay vengono nascosti del tutto sugli schermi piccoli — l'insegna che pende sopra la lezione su desktop non ha più dove appendersi una volta che la lavagna occupa tutta la larghezza, quindi fa la stessa fine della porta e dell'orologio invece di essere tagliata in modo goffo. Il mobile non ottiene una versione più veloce dello stesso spettacolo in sette battute. Ottiene uno spettacolo in cinque battute costruito apposta per il layout in cui gira davvero.
Cosa succede quando il movimento viene disattivato
Un'unica regola globale riduce ogni animazione e transizione del sito a una durata praticamente nulla nel momento in cui il dispositivo di un visitatore richiede prefers-reduced-motion: reduce. Per la scena principale, questo significa che la porta, la camminata, il pavimento, la lavagna, l'insegna e l'orologio non si svolgono su una tabella di marcia compressa — passano al loro stato finale praticamente all'istante, perché non esiste una versione abbreviata della sequenza nascosta dietro quella completa. È una scelta di design reale con un compromesso reale: alcune linee guida sull'accessibilità preferiscono mantenere una transizione breve ma comunque presente piuttosto che un taglio netto, sulla teoria che un cambio di scena improvviso possa a sua volta risultare spiazzante. Noi abbiamo scelto la garanzia più semplice — un'impostazione sul movimento rispettata completamente, senza alcun movimento residuo da dover ricontrollare — invece di una versione parzialmente ridotta che avrebbe richiesto test propri per confermare che fosse davvero abbastanza delicata.
Di cosa non siamo ancora sicuri
Element.getAnimations() è ampiamente supportato nei browser attuali ma non lo è sempre stato, ed è esattamente per questo che il pulsante lo verifica e scompare invece di dare per scontata la sua presenza — un'abitudine piccola ma istruttiva quanto funzionale, che però significa che un numero ridotto di visitatori su browser datati non vede alcun pulsante di replay, anziché una versione degradata. Non abbiamo provato a quantificare quante persone siano realmente, perché per l'introduzione decorativa di un sito marketing, la risposta onesta è che probabilmente non vale il tempo di ingegneria necessario a scoprirlo.