Die Landingpage beginnt mit einer Tür, die zuschwingt, einem Weg zum Pult, einem Boden und einer Decke, die einblenden, einer Tafel, die einrastet, einem hängenden Schild und schließlich einer Wanduhr, deren Sekundenzeiger zu laufen beginnt – sieben Beats nach einem festen Zeitplan: Tür bei 0.5s, Hereinkommen bei 0.75s, Boden bei 2s, Decke bei 2.15s, Tafel bei 2.35s, Schild bei 2.6s, Uhr bei 2.7s. Nichts davon wird in JavaScript orchestriert. Jeder Beat ist eine CSS-Keyframe-Animation mit eigenem animation-delay, und die „Choreografie" ist nichts weiter als sieben Verzögerungen, die so gewählt wurden, dass sie in der richtigen Reihenfolge landen. In der Ecke gibt es einen kleinen kreisförmigen Pfeil, der beim Klick alles neu abspielt, und das Interessante ist: Sein Code weiß von alldem oben nichts.
Ein Aufruf, nicht sieben
Ein naiver Replay-Button müsste jedes Element mit einer Animation kennen, jedes einzeln neu starten und diese Liste jedes Mal aktuell halten, wenn dem Intro ein neuer Beat hinzugefügt wird. Dieser Button tut das nicht. Er ruft hero.getAnimations({ subtree: true }) auf – eine Browser-API, die jede laufende Web Animation irgendwo innerhalb des Hero-Elements zurückgibt, egal welche –, und ruft für jede zurückgegebene Animation .cancel() und dann .play() auf. Das ist der gesamte Handler. Einen achten Beat später zum Intro hinzuzufügen erfordert an dieser Funktion keine einzige Änderung; der Browser gibt beim nächsten Klick auf den Button einfach eine Animation mehr zurück, weil die Funktion sie von Anfang an nie gezählt hat.
Bevor irgendetwas davon läuft, prüft der Code, ob hero.getAnimations überhaupt existiert, und wenn nicht, versteckt er den Button, statt den Click-Handler zu verdrahten. Ein Button, der sichtbar ist, aber auf einem älteren Browser nichts tut, ist schlimmer als gar kein Button – er lädt zum Klicken ein und liefert dann still nichts, was ein schlimmeres Scheitern ist, als die Funktion gar nicht erst anzubieten.
Dieselben sieben Beats erreichen kleine Bildschirme nie
Unterhalb von 900 Pixeln Breite hört das Klassenzimmer auf, ein seitliches Diorama zu sein, und stapelt sich vertikal. Das Intro, das dort läuft, ist keine verkürzte Version des Desktop-Intros – es ist eine andere, kürzere Sequenz mit weniger Beats: Decke bei 0s, Boden bei 0.2s, Tafel bei 0.25s, Lehrer bei 0.65s, Bildunterschrift bei 1.05s. Die Tür, die Wanduhr und der Replay-Button selbst sind auf kleinen Bildschirmen komplett ausgeblendet – das Schild, das auf dem Desktop über der Lektion hängt, hat nichts mehr zum Aufhängen, sobald die Tafel die volle Breite einnimmt, also teilt es das Schicksal von Tür und Uhr, statt unschön abgeschnitten zu werden. Mobil bekommt keine schnellere Version derselben Sieben-Beat-Show. Es bekommt eine Fünf-Beat-Show, gebaut für das Layout, in dem sie tatsächlich läuft.
Was passiert, wenn Bewegung ausgeschaltet ist
Eine einzige globale Regel reduziert jede Animation und jeden Übergang auf der Website auf eine Dauer von annähernd null, sobald das Gerät eines Besuchers prefers-reduced-motion: reduce anfordert. Für den Hero-Bereich bedeutet das: Tür, Weg, Boden, Tafel, Schild und Uhr laufen nicht auf einer komprimierten Zeitleiste ab – sie springen praktisch sofort in ihren Endzustand, weil hinter der vollen Sequenz keine verkürzte Version steckt. Das ist eine echte Design-Entscheidung mit einem echten Kompromiss: Manche Accessibility-Richtlinien bevorzugen einen kurzen, weiterhin vorhandenen Übergang statt eines harten Schnitts, mit der Begründung, dass ein plötzlicher Szenenwechsel selbst erschreckend wirken kann. Wir haben uns für die einfachere Garantie entschieden – eine Bewegungseinstellung, die vollständig respektiert wird, ohne Restbewegung, die irgendjemand nachprüfen müsste – statt für eine teilweise reduzierte Version, die eigene Tests bräuchte, um zu bestätigen, dass sie wirklich sanft genug ist.
Wo wir uns noch unsicher sind
Element.getAnimations() wird in aktuellen Browsern breit unterstützt, war das aber nicht immer – genau deshalb prüft der Button darauf und verschwindet, statt es einfach vorauszusetzen. Das ist ebenso eine lehrreiche kleine Angewohnheit wie eine funktionale, bedeutet aber auch, dass eine kleine Zahl von Besuchern auf alten Browsern gar keinen Replay-Button sieht statt eines abgespeckten. Wir haben nicht versucht zu beziffern, wie viele Leute das tatsächlich sind, denn für das dekorative Intro einer Marketing-Website ist die ehrliche Antwort: Die Entwicklungszeit, das herauszufinden, lohnt sich vermutlich nicht.