Text Distortion

Ein SVG-Filter verzerrt Text oder Formen mit animiertem Rauschen.

Füge bei [wo] einen „SVG Displacement Distortion“-Hover-Effekt hinzu (auch displacement map effect genannt).
Solange der Zeiger darüber ist, soll der Text oder die Form wellen und wabern, als sähe man sie durch bewegtes Wasser, sanft einsetzend, und beim Verlassen wieder scharf werden.
Wende den Verzerrungsfilter nur an, solange der Effekt aktiv ist, damit er im Ruhezustand nichts kostet, und zeig denselben Effekt bei Tastaturfokus.

Die Buchstabenkanten zittern wie handgezeichnet – erzeugt mit einem SVG-Displacement-Filter.

Füge bei [wo] einen „Squiggly Text“-Effekt hinzu (auch wobbly text oder turbulence text genannt).
Die Buchstabenkanten sollen leicht wackeln, als würden sie mehrmals pro Sekunde von Hand neu gezeichnet: ein dezentes, zittriges Brodeln statt einer weichen Welle.
Halte den Text lesbar und lass ihn bei reduzierter Bewegung (prefers-reduced-motion) still stehen.

Die Buchstaben tropfen und ziehen sich nach unten, als würden sie schmelzen.

Füge bei [wo] einen „Melting Text“-Effekt hinzu.
Die Buchstaben sollen langsam nach unten sacken, während sich darunter Tropfen in die Länge ziehen, als würden sie schmelzen, und dann in einem ruhigen, geschmolzenen Zustand stehen bleiben.
Spiele ihn einmal ab, wenn der Text ins Bild kommt, halte das Wort am Ende lesbar und verzichte bei reduzierter Bewegung (prefers-reduced-motion) auf die Animation.

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.

Ein farbiges Band wie von einem Textmarker zieht sich über eine Phrase, um sie hervorzuheben.

Füge bei [wo] einen Textmarker-Effekt („Text Highlighter“) hinzu, auch highlight marker oder marker underline genannt.
Ein farbiges Band wie von einem Textmarker soll sanft von links nach rechts hinter die wichtige Phrase gleiten, als würde jemand sie mit einem Stift markieren.
Spiele ihn nur einmal ab, wenn die Phrase ins Bild scrollt, halte den Text auf dem Band gut lesbar und lass das Band der Phrase korrekt folgen, wenn sie auf zwei Zeilen umbricht.

Ein Wort in Umrissschrift wird von einem Verlauf gefüllt oder beleuchtet, der dem Zeiger folgt oder darüber streicht.

Füge bei [wo] einen „Text Hover Effect“ hinzu (auch text fill on hover oder gradient outline text hover genannt).
Das Wort soll zunächst nur als Umriss erscheinen; solange der Zeiger darüber ist, soll sich eine volle Füllung sanft von links nach rechts hineinschieben und beim Verlassen wieder zurückziehen.
Halte das Umrisswort vor dem Füllen gut lesbar und zeige denselben Effekt beim Tastaturfokus.