Animated Gradient Text

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.

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.

Die Farben eines Verlaufshintergrunds verschieben, bewegen oder drehen sich langsam.

Füge bei [wo] einen „Animated Gradient“-Hintergrund hinzu (auch gradient animation oder moving gradient genannt).
Die Farben des Verlaufs sollen langsam über die Fläche ziehen, in einem weichen, stetigen Fluss, ohne sichtbaren Sprung beim Neustart der Schleife.
Halte den Text darüber auf jeder Farbe lesbar und stoppe die Bewegung bei reduzierter Bewegung (prefers-reduced-motion).

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.

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