Glitch Text
Auch genannt Text Glitch, RGB Split Glitch
Text zuckt mit verschobenen Streifen und rot-cyanen Farbversätzen wie ein gestörtes Signal.
Einsatz
Cyberpunk- oder Gaming-Überschriften
Varianten
- on hover
- continuous loop
- image or SVG glitch
Prompt
Ersetze [wo] durch die Stelle auf deiner Seite und füge den Prompt in deinen KI-Agenten ein. Jeder Prompt enthält den Namen der Animation – beim nächsten Mal reicht es, sie beim Namen zu nennen.
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.Ähnliche Animationen
A
Q
J
P
N
V
Y
HB
K
M
L
Z
W
T
XC
R
G
Q
J
P
N
VD
Y
H
K
M
L
Z
WE
T
X
R
G
Q
J
PF
N
V
Y
H
K
M
L
Mit der Maus darüberfahren
Text Scramble
Auch genannt ScrambleText, Text Decode, Encrypted Text, Text Unscramble, Hyper Text
Der Text wird durch zufällige Zeichen ersetzt, die wechseln und sich nach und nach zum endgültigen Wort auflösen.
Einsatz
Hero-Titel im Tech-Stil, Link-Hover
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.ABC
Flicker
Auch genannt Flickering
Die Deckkraft des Elements flackert unregelmäßig wie eine defekte Lampe.
Einsatz
Neon- und Glitch-Effekte
Füge bei [wo] einen „Flicker“-Effekt hinzu (auch flickering genannt).
Das Element soll die meiste Zeit ruhig bleiben und in kurzen, unregelmäßigen Aussetzern dunkler werden wie eine defekte Neonröhre.
Halte das Timing unregelmäßig statt gleichmäßig, vermeide schnelles Blitzen in voller Stärke und stoppe ihn bei reduzierter Bewegung.ABCABCABC
Darin scrollen
Sliced Text
Auch genannt On-Scroll Sliced Text
Eine Überschrift wird in waagerechte Streifen geschnitten, die sich beim Scrollen seitlich gegeneinander verschieben.
Einsatz
Redaktioneller Hero
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.Q
R
U
P
D
H
LY
O
S
G
K
X
BA
F
J
Z
V
M
EH
L
C
N
W
T
IX
B
Q
R
U
P
DM
E
Y
O
S
G
KT
I
A
F
J
Z
VP
D
H
L
C
N
W
Matrix Text
Auch genannt Digital Rain Text
Grüne Zeichen fallen in Spalten herab wie der Code-Regen aus Matrix.
Einsatz
Hacker-Themen
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).Mehr aus Text
ABCDEF
Mit der Maus darüberfahren
Holographic Text
Auch genannt Holographic Foil Text
Text zeigt schillernde Regenbogen-Folienreflexe, die sich mit dem Zeiger oder mit der Zeit bewegen.
Einsatz
Premium-Karten
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.ABC DEF GHI JKLABC DEF GHI JKL
MNO PQR STU VWXMNO PQR STU VWX
YZA BCD EFG HIJYZA BCD EFG HIJ
Kinetic Typography
Auch genannt Kinetic Text
Text skaliert, bewegt oder dreht sich als bewegtes Grafikelement statt als statischer Fließtext.
Einsatz
Marken-Hero-Bereiche
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).ABCDEF
Mit der Maus darüberfahren
Letter Scatter
Auch genannt Explosive Letter Burst, Scatter Gather Letters
Buchstaben fliegen beim Hovern auseinander und kehren zurück oder platzen beim Erscheinen nach außen.
Einsatz
Verspielte Links
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.