SVG Displacement Distortion

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.

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.

Eine Maskenform wischt über die Fläche oder folgt dem Zeiger und legt den Inhalt darunter frei.

Füge bei [wo] einen „SVG Mask Reveal“-Hover-Effekt hinzu (auch clip-path reveal oder spotlight mask genannt).
Solange der Zeiger darüber ist, soll eine kreisförmige Maske aus der Mitte wachsen und den Inhalt darunter freilegen und sich beim Verlassen wieder schließen: weich und recht schnell.
Halte beide Ebenen exakt gleich groß, damit sich nichts verschiebt, und zeig dieselbe Enthüllung bei Tastaturfokus und Antippen.

Ein organischer Blob verändert fortlaufend seine Umrissform.

Füge bei [wo] eine „Blob Morph“-Loop-Animation hinzu (auch morphing blob oder animated blob genannt).
Ein organischer Blob soll seine Umrissform langsam und ständig verändern und sich dabei sanft drehen: fließend und weich, ohne scharfe Ecken.
Mach die Schleife nahtlos, damit die Form nie springt, und lass sie bei reduzierter Bewegung (prefers-reduced-motion) stillstehen.

Nahe Formen verschmelzen per Weichzeichner- und Kontrastfilter wie flüssige Tropfen miteinander.

Füge bei [wo] einen „Gooey Effect“ hinzu (auch goo effect oder metaballs genannt).
Solange der Zeiger darüber ist, sollen sich kleine Tropfen von der Hauptform lösen, sich dabei wie Flüssigkeit dehnen und dann abreißen; verlässt der Zeiger die Fläche, fließen sie zurück und verschmelzen weich.
Wende den Weichzeichner- und Kontrastfilter nur auf die kleine Gruppe von Formen an, nicht auf die ganze Seite, und zeig denselben Effekt bei Tastaturfokus und Antippen.