Typewriter (Schreibmaschineneffekt)

Die Wörter blenden beim Laden der Seite nacheinander ein, oft während sich eine Unschärfe auflöst, als würden sie gerade generiert.

Füge bei [wo] einen „Text Generate“-Effekt hinzu.
Die Wörter sollen nacheinander einblenden, während sich bei jedem eine weiche Unschärfe auflöst, als würde der Text gerade generiert: gleichmäßig und ruhig.
Spiele ihn beim Laden nur einmal ab, lass Screenreader sofort den ganzen Text lesen und zeige ihn bei reduzierter Bewegung (prefers-reduced-motion) ohne Animation an.

Der Text wird durch zufällige Zeichen ersetzt, die wechseln und sich nach und nach zum endgültigen Wort auflösen.

Füge bei [wo] einen „Text Scramble“-Hover-Effekt hinzu (auch text decode oder encrypted text genannt).
Wenn der Zeiger über den Text fährt, soll jeder Buchstabe schnell durch zufällige Zeichen flackern und auf seinem echten Buchstaben landen, einer nach dem anderen von links nach rechts.
Verhindere, dass die Textbreite beim Durchmischen springt, lass Screenreader den echten Text lesen und zeige denselben Effekt beim Tastaturfokus.

Drei Punkte in einer Sprechblase pulsieren oder heben sich nacheinander, um zu zeigen, dass jemand oder eine KI schreibt.

Füge bei [wo] einen „Typing Indicator“ hinzu (auch typing dots genannt).
Punkte in einer kleinen Chat-Blase sollen nacheinander aufsteigen und heller werden, in einem weichen, sanften Rhythmus, solange die Gegenseite schreibt.
Halte die Schleife nahtlos, entferne die Blase, sobald die Nachricht ankommt, und gib Screenreadern statt der Punkte einen kurzen Statustext.

Die Textmarke wächst oder schrumpft passend zur Größe des Zeichens, neben dem sie steht.

Füge bei [wo] einen „Adaptive Caret“-Effekt hinzu (auch adaptive caret size genannt).
Die Textmarke soll vor das Zeichen springen, das dem Zeiger am nächsten ist, und sich schnell auf dessen Höhe strecken oder stauchen, mit einer weichen, zackigen Größenänderung ohne Nachfedern.
Verhindere, dass sich der Text selbst verschiebt, und lass die Marke Tastaturbewegungen genauso folgen wie dem Zeiger.

Beim Hovern wächst unter einem Link eine Unterstreichung von einer Seite oder aus der Mitte heraus.

Füge bei [wo] einen „Underline Draw“-Hover-Effekt hinzu (auch animated underline oder hover underline animation genannt).
Wenn der Zeiger über dem Link ist, soll unter dem Text eine Unterstreichung sanft von links nach rechts wachsen und beim Verlassen wieder schrumpfen: schnell und dezent.
Verhindere, dass die Unterstreichung das umgebende Layout verschiebt, und zeige denselben Effekt beim Tastaturfokus.

Die Buchstaben werden über die Achsen einer variablen Schrift fließend fetter oder leichter (oder ändern Breite und Neigung).

Füge bei [wo] einen „Variable Font Weight Animation“-Hover-Effekt hinzu (auch font weight shift genannt).
Solange der Zeiger über dem Text ist, sollen die Buchstaben nacheinander in einer weichen Welle von links nach rechts fetter werden und beim Verlassen wieder dünner.
Nutze eine variable Schrift, damit sich die Stärke fließend statt sprunghaft ändert, verhindere, dass die breiter werdende Überschrift benachbarte Inhalte verschiebt, und zeige denselben Effekt beim Tastaturfokus.

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.