Text

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.

Text zeigt schillernde Regenbogen-Folienreflexe, die sich mit dem Zeiger oder mit der Zeit bewegen.

Füge bei [wo] einen „Holographic Text“-Hover-Effekt hinzu (auch holographic foil text genannt).
Solange der Zeiger über dem Text ist, soll ein Band aus folienartigen Farben langsam und weich über die Buchstaben hin und her gleiten; verlässt der Zeiger den Text, kehrt er zu seinem schlichten Aussehen zurück.
Halte die Buchstaben in jeder Phase des Schimmers lesbar und zeige denselben Effekt beim Tastaturfokus.

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

Buchstaben fliegen beim Hovern auseinander und kehren zurück oder platzen beim Erscheinen nach außen.

Füge bei [wo] einen „Letter Scatter“-Hover-Effekt hinzu (auch scatter gather letters oder explosive letter burst genannt).
Fährt der Zeiger über den Text, soll jeder Buchstabe ein kurzes Stück in seine eigene Richtung fliegen und sich dabei leicht drehen; verlässt der Zeiger den Text, sammeln sie sich weich wieder zum Wort.
Halte den Platz des Worts im Layout fest, während die Buchstaben sich bewegen, lass Screenreader es als ein Wort lesen und zeige denselben Effekt beim Tastaturfokus.

Ein gestreifter oder versetzter Schatten hinter den Buchstaben bewegt sich in eine Richtung.

Füge bei [wo] einen „Line Shadow Text“-Effekt hinzu (auch text shadow animation oder dancing shadow genannt).
Hinter den Buchstaben soll ein versetzter Schatten aus dünnen diagonalen Streifen langsam und stetig gleiten, während die Buchstaben selbst ruhig und scharf bleiben.
Lass die Streifenbewegung nahtlos loopen und den Schatten bei reduzierter Bewegung (prefers-reduced-motion) stillstehen.

Buchstaben füllen sich mit einer steigenden, wogenden Flüssigkeit.

Füge bei [wo] einen „Liquid Fill Text“-Effekt hinzu (auch water fill text genannt).
Die konturierten Buchstaben sollen sich mit Flüssigkeit füllen, deren wellige Oberfläche seitwärts rollt, während der Pegel langsam steigt und sinkt – als weiche, durchgehende Schleife.
Halte das Wort als echten Text für Screenreader verfügbar und lass die Flüssigkeit bei reduzierter Bewegung (prefers-reduced-motion) auf einem ruhigen Pegel stehen.

Der Text gleitet hinter einer Schnittkante nach oben, als tauche er aus dem Nichts auf.

Füge bei [wo] einen „Mask Reveal“-Texteinstieg hinzu (auch line mask reveal oder text masking genannt).
Jede Zeile soll hinter einer unsichtbaren Kante nach oben gleiten, als tauche sie aus dem Nichts auf, eine nach der anderen, schnell und weich, ohne Nachfedern.
Spiele ihn einmal ab, wenn der Text ins Bild scrollt, und zeige den Text bei reduzierter Bewegung (prefers-reduced-motion) sofort ohne Animation.

Grüne Zeichen fallen in Spalten herab wie der Code-Regen aus Matrix.

Füge bei [wo] einen „Matrix Text“-Effekt hinzu (auch digital rain text genannt).
Zeichenspalten sollen gleichmäßig mit leicht unterschiedlichen Geschwindigkeiten herabfallen, jede mit einem hellen vorderen Zeichen und einem Schweif, der dahinter verblasst.
Behandle ihn als Dekoration, die vor Screenreadern verborgen ist, halte ihn leichtgewichtig und stoppe ihn bei reduzierter Bewegung (prefers-reduced-motion).

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.

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.

Ein heller Glanz streicht immer wieder über die Buchstaben.

Füge bei [wo] einen „Shimmer Text“-Effekt hinzu (auch animated shiny text oder metallic shimmer text genannt).
Ein Lichtstreifen soll weich von links nach rechts über die Buchstaben gleiten und sich nach einer kurzen Pause wiederholen.
Halte den Text unter dem Glanz lesbar und lass ihn bei reduzierter Bewegung (prefers-reduced-motion) still stehen.

Eine Überschrift wird in waagerechte Streifen geschnitten, die sich beim Scrollen seitlich gegeneinander verschieben.

Füge bei [wo] einen „Sliced Text“-Effekt hinzu (auch on-scroll sliced text genannt).
Eine große Überschrift soll in waagerechte Streifen geschnitten sein, die beim Scrollen seitlich gegeneinander gleiten und am Anfang zum ganzen Wort ausgerichtet sind.
Kopple die Verschiebung direkt an die Scrollposition, damit sie sich beim Zurückscrollen umkehrt, und halte die Überschrift für Screenreader als einen lesbaren Text.

Der Text ist um einen Kreis gesetzt, der sich ununterbrochen dreht.

Füge bei [wo] „Spinning Text“ hinzu (auch circular text oder text on circle genannt).
Die Buchstaben sollen gleichmäßig um einen Kreis verteilt sein, der sich langsam und gleichmäßig dreht, ohne Sprung beim Neustart der Schleife.
Gib Screenreadern den Text einmal als normalen Text und stoppe die Drehung bei reduzierter Bewegung (prefers-reduced-motion).

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.

Die Zeichen blättern um wie auf einer Abflugtafel am Flughafen, bis der Zielbuchstabe erscheint.

Füge bei [wo] eine Fallblattanzeige (Split-Flap Text) hinzu – auch text flipping board oder flip board genannt.
Jedes Zeichenfeld soll schnell durch das Alphabet blättern, bis es auf seinem Zielbuchstaben landet, wobei die Felder nacheinander von links nach rechts zur Ruhe kommen.
Lass sie jedes Mal einmal laufen, wenn der Text erscheint oder sich ändert, gib Screenreadern nur den finalen Text aus und zeige bei reduzierter Bewegung (prefers-reduced-motion) den finalen Text ohne Blättern.

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 bleibt fixiert, während seine Zeilen mit dem Scrollfortschritt ein- und ausblenden.

Füge bei [wo] einen „Sticky Text Fade“-Effekt hinzu (auch sticky scroll text opacity fade genannt).
Während der Abschnitt scrollt, soll der Textblock fixiert bleiben und seine Zeilen sollen nacheinander mit dem Scrollfortschritt ein- und ausblenden.
Kopple die Überblendungen direkt an die Scrollposition, damit sie sich beim Zurückscrollen umkehren, und halte jede Zeile unabhängig von ihrer Deckkraft für Screenreader verfügbar.

Die Buchstabenumrisse werden als Linie gezeichnet, bevor die Füllung erscheint.

Füge bei [wo] einen „Stroke Text Draw“-Effekt hinzu (auch draw in text oder animated stroke text genannt).
Die Buchstabenumrisse sollen sich weich selbst zeichnen, und sobald sie vollständig sind, soll die Füllung einblenden.
Spiele ihn einmal beim Laden ab, halte das Wort als echten Text zugänglich und zeige bei reduzierter Bewegung (prefers-reduced-motion) sofort den gefüllten Text.

Buchstaben oder Wörter drehen sich in 3D um eine Achse und zeigen auf ihrer Rückseite den nächsten Text.

Füge bei [wo] einen „Text 3D Flip“-Hover-Effekt hinzu (auch 3D flip text reveal genannt).
Wenn der Zeiger über dem Text ist, soll jeder Buchstabe in 3D um seine waagerechte Achse kippen und auf seiner anderen Seite einen neuen Buchstaben zeigen, nacheinander in einer schnellen, weichen Welle, und zurückkippen, wenn der Zeiger den Text verlässt.
Halte die Textbox während des Kippens gleich groß und zeige denselben Effekt beim Tastaturfokus.

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

Der Text folgt einem gekrümmten Pfad und wandert beim Scrollen daran entlang.

Füge bei [wo] einen „Text Path Scroll“-Effekt hinzu (auch text path curve scroll animation genannt).
Der Text soll auf einer geschwungenen Linie sitzen und beim Scrollen daran entlanggleiten: vorwärts beim Herunterscrollen, zurück beim Hochscrollen.
Kopple die Bewegung ohne Verzögerung direkt an die Scrollposition und halte den Text für Screenreader als normalen Text lesbar.

Ein Wort wird in viele gestapelte Kopien vervielfältigt, die sich beim Scrollen verschieben.

Füge bei [wo] einen „Text Repetition“-Effekt hinzu (auch repeated text scroll genannt).
Ein Wort soll in einen Stapel blasserer Umrisskopien vervielfältigt werden, die sich beim Scrollen hinter ihm auffächern und beim Hochscrollen wieder zusammenfalten.
Kopple das Auffächern direkt an die Scrollposition und verstecke die zusätzlichen Kopien vor Screenreadern, damit das Wort nur einmal vorgelesen wird.

Vorhandener Text wird animiert ausgeblendet und durch neuen Text ersetzt.

Füge bei [wo] einen „Text Replacement“-Effekt hinzu (auch text swap genannt).
Wenn sich der Text ändert, sollen die alten Zeichen nach oben hinausgleiten und die neuen von unten hereinkommen, Zeichen für Zeichen in einer schnellen, weichen Welle.
Verhindere, dass die Textbox beim Wechsel in der Größe springt, und lass Screenreader nur den neuen Text ansagen.

Die Wörter eines Absatzes gehen beim Scrollen von blass zu voller Deckkraft über.

Füge bei [wo] einen „Text Reveal“-Effekt hinzu (auch scroll text reveal oder word-by-word reveal genannt).
Der Absatz soll blass beginnen, und beim Scrollen soll ein Wort nach dem anderen auf volle Stärke aufhellen, gekoppelt an die Scrollposition.
Beim Hochscrollen sollen die Wörter wieder verblassen, und der ganze Absatz soll unabhängig von der Abdunklung für Screenreader verfügbar bleiben.

Wenn der Zeiger über eine Karte fährt, wird unter einer Maskenkante oder einem Spotlight verborgener Text sichtbar.

Füge bei [wo] einen „Text Reveal Card“-Effekt hinzu (auch spotlight text reveal genannt).
Wenn der Zeiger über die Karte fährt, soll ihm eine senkrechte Kante dicht folgen und auf einer Seite verborgenen Text freilegen: weich und direkt, ohne Verzögerung.
Auf Touch-Geräten, wo es keinen Zeiger gibt, soll Ziehen oder Tippen den verborgenen Text zeigen; mach den verborgenen Text außerdem für Screenreader zugänglich.

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.

Der Text neigt sich in 3D-Perspektive und folgt dabei der Mausposition.

Füge bei [wo] einen „Text Tilt“-Effekt hinzu (auch perspective text tilt genannt).
Der Text soll sich sanft in 3D zum Zeiger neigen, ihm beim Bewegen weich folgen und beim Verlassen sanft wieder flach werden.
Halte die Neigung dezent, damit der Text lesbar bleibt, und lass ihn auf Touch-Geräten und bei reduzierter Bewegung (prefers-reduced-motion) flach.

Die Zeichen erscheinen einzeln, als würden sie getippt, meist gefolgt von einer blinkenden Einfügemarke.

Füge bei [wo] einen Schreibmaschineneffekt (Typewriter) hinzu, auch typing animation oder typing text genannt.
Die Zeichen sollen einzeln in gleichmäßigem Tipptempo erscheinen, mit einer Einfügemarke direkt hinter dem zuletzt getippten Zeichen, die nach dem Tippen ein paar Mal blinkt.
Spiele ihn nur einmal statt in Schleife ab, lass Screenreader sofort den ganzen Text lesen und zeige bei reduzierter Bewegung (prefers-reduced-motion) gleich den vollständigen Text.

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.

Die Buchstaben wippen nacheinander auf und ab, sodass eine Welle durch das Wort läuft.

Füge bei [wo] einen „Wavy Text“-Effekt hinzu (auch text wave genannt).
Die Buchstaben sollen nacheinander auf und ab wippen, sodass ständig eine sanfte, weiche Welle durch das Wort läuft.
Lass die Schleife nahtlos laufen, sorge dafür, dass Screenreader es als ein Wort lesen, und stoppe die Welle bei reduzierter Bewegung (prefers-reduced-motion).

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