Variable Font Weight Animation

Die Buchstaben beginnen weit gesperrt und blass und rücken beim Erscheinen auf normalen Abstand zusammen.

Füge bei [wo] eine „Tracking In“-Textanimation hinzu (auch text tracking in oder letter-spacing in genannt).
Die Buchstaben sollen weit gesperrt und blass beginnen und dann auf normalen Abstand zusammenrücken, während sie voll sichtbar werden: weich, zum Ende hin abbremsend.
Halte den Text während der Abstandsänderung zentriert und einzeilig, damit sich das umgebende Layout nicht verschiebt, und zeige ihn bei reduzierter Bewegung (prefers-reduced-motion) mit normalem Abstand an.

Text skaliert, bewegt oder dreht sich als bewegtes Grafikelement statt als statischer Fließtext.

Füge bei [wo] „Kinetic Typography“ hinzu (auch kinetic text genannt).
Zeilen aus großem, wiederholtem Text sollen langsam und gleichmäßig abwechselnd in entgegengesetzte Richtungen seitwärts gleiten und die Wörter so zu einer bewegten Grafik machen.
Lass jede Zeile nahtlos ohne sichtbaren Sprung laufen, sorg dafür, dass Screenreader den Text nur einmal vorlesen, und stoppe die Bewegung bei reduzierter Bewegung (prefers-reduced-motion).

Große Buchstaben wirken wie ein Fenster, in dem ein laufendes Video zu sehen ist.

Füge bei [wo] einen „Video Text“-Effekt hinzu (auch text video mask genannt).
Große, fette Buchstaben sollen wie ein Fenster zu einem laufenden Video wirken, sodass die bewegten Bilder nur innerhalb der Buchstabenformen zu sehen sind.
Lass das Video stumm und ohne Steuerelemente in Schleife laufen, stelle die Wörter für Screenreader als echten Text bereit und zeige bei reduzierter Bewegung (prefers-reduced-motion) ein Standbild.

Die Buchstaben wippen nacheinander auf und ab, sodass eine Welle durch das Wort läuft.

Füge bei [wo] einen „Wavy Text“-Effekt hinzu (auch text wave genannt).
Die Buchstaben sollen nacheinander auf und ab wippen, sodass ständig eine sanfte, weiche Welle durch das Wort läuft.
Lass die Schleife nahtlos laufen, sorge dafür, dass Screenreader es als ein Wort lesen, und stoppe die Welle bei reduzierter Bewegung (prefers-reduced-motion).

Ein Wort im Satz wird per Gleiten, Drehen oder Überblenden durch das nächste Wort einer Liste ersetzt.

Füge bei [wo] einen „Word Rotate“-Effekt hinzu (auch rotating words oder flip words genannt).
Ein Wort in der Zeile soll nach oben hinausgleiten, während das nächste Wort aus einer Liste von unten hereinkommt, mit einer Pause auf jedem Wort vor dem nächsten Wechsel.
Verhindere, dass der Rest der Zeile bei unterschiedlich breiten Wörtern springt, lass Screenreader nicht jeden Wechsel ansagen und stoppe den Wechsel bei reduzierter Bewegung (prefers-reduced-motion).