Melting Text

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.

Der Text verzerrt und kräuselt sich organisch, angetrieben durch Scrollen oder Zeigerbewegung.

Füge bei [wo] einen „Text Distortion“-Effekt hinzu (auch organic text distortion genannt).
Eine Textzeile soll endlos seitwärts fließen und sich dabei organisch verzerren und kräuseln, als sähe man sie durch bewegtes Wasser, wobei das Scrollen den Fluss antreibt.
Halte die Verzerrung so leicht, dass der Text lesbar bleibt, sorge dafür, dass sie auch auf langsameren Geräten flüssig läuft, und schalte sie bei reduzierter Bewegung (prefers-reduced-motion) ab.

Ein Wort verschwimmt an derselben Stelle und geht fließend ins nächste über.

Füge bei [wo] einen „Morphing Text“-Effekt hinzu (auch text morph genannt).
Ein Wort soll an derselben Stelle verschwimmen und mit einem weichen, zähflüssigen Übergang ins nächste verschmelzen und dann kurz stillstehen, bevor der nächste Wechsel kommt.
Wechsle die Wörter nahtlos durch, lass Screenreader die Wörter als normalen Text lesen und stoppe den Wechsel bei reduzierter Bewegung (prefers-reduced-motion).

Der Text leuchtet wie eine Neonröhre und flackert oder pulsiert.

Füge bei [wo] einen „Neon Glow Text“-Effekt hinzu (auch neon sign flicker oder glowing text genannt).
Der Text soll wie eine Neonröhre mit weichem, gleichmäßigem Licht leuchten und hin und wieder kurz ausflackern wie ein echtes Leuchtschild.
Lass das Flackern nur gelegentlich und nicht schnell auftreten, weil schnelles Blinken manchen Menschen schaden kann, und halte das Leuchten bei reduzierter Bewegung (prefers-reduced-motion) konstant.

Die Buchstaben eines Titels wechseln oder bewegen sich nacheinander, während man durch die Abschnitte scrollt.

Füge bei [wo] „Scrolling Letters“ hinzu (auch on-scroll letter animations genannt).
Während man durch die Abschnitte scrollt, sollen die Buchstaben des Titels nacheinander von links nach rechts zum nächsten Zeichen weiterrollen, direkt an die Scrollposition gekoppelt.
Beim Zurückscrollen sollen sie zurückrollen, und Screenreader sollen den aktuellen Titel als normalen Text erhalten.