Wavy Text

Eine Überschrift wird in Zeichen, Wörter oder Zeilen zerlegt, die mit kleiner Verzögerung nacheinander einlaufen.

Füge bei [wo] einen „Split Text Stagger“-Einstieg hinzu (auch letter stagger oder staggered text reveal genannt).
Zerlege die Überschrift in Buchstaben, die mit kurzer Verzögerung nacheinander nach oben gleiten und einblenden, schnell und weich, ohne Nachfedern.
Spiele ihn einmal ab, wenn die Überschrift ins Bild kommt, sorge dafür, dass Screenreader sie als ein Wort lesen, und zeige sie bei reduzierter Bewegung (prefers-reduced-motion) ohne Animation.

Eine Reihe von Punkten hüpft, blendet oder skaliert nacheinander.

Füge bei [wo] „Bouncing Dots“ hinzu (auch dots loader oder three-dot loader genannt).
Die Punkte sollen nacheinander hochhüpfen und landen, in einem leichten, federnden Rhythmus, mit einer kurzen Pause, bevor die Abfolge von vorn beginnt.
Halte die Schleife nahtlos, gib ihr ein Status-Label für Screenreader und stoppe die Bewegung bei reduzierter Bewegung (prefers-reduced-motion).

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).

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.

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).

Text mit einer Verlaufsfüllung, deren Farben sich ständig verschieben oder fließen.

Füge bei [wo] einen „Animated Gradient Text“-Effekt hinzu (auch aurora text oder rainbow text sweep genannt).
Die Buchstaben sollen mit einem Farbverlauf gefüllt sein, dessen Farben langsam und weich über den Text fließen, in einer endlosen, nahtlosen Schleife.
Halte den Text jederzeit gut lesbar vor seinem Hintergrund und lass die Farben bei reduzierter Bewegung (prefers-reduced-motion) stillstehen.

Text zuckt mit verschobenen Streifen und rot-cyanen Farbversätzen wie ein gestörtes Signal.

Füge bei [wo] einen „Glitch Text“-Hover-Effekt hinzu (auch text glitch oder RGB split glitch genannt).
Solange der Zeiger über dem Text ist, soll er in schnellen, knackigen Schüben zucken: Dünne horizontale Streifen springen seitwärts und zwei farbige Kopien driften auseinander wie ein gestörtes Signal; verlässt der Zeiger den Text, beruhigt er sich wieder.
Halte den echten Text nur einmal im Dokument, damit Screenreader die Kopien nicht vorlesen, und zeige denselben Effekt beim Tastaturfokus.