Stroke Text Draw
Auch genannt Draw In Text, Animated Stroke Text
Die Buchstabenumrisse werden als Linie gezeichnet, bevor die Füllung erscheint.
Einsatz
Logos und Hero-Wörter
Varianten
- stroke then fill
- outline only
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 „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.Ähnliche Animationen
Line Drawing
Auch genannt Path Drawing, Stroke Dash Animation, Self-Drawing SVG, DrawSVG, Line Draw, SVG Path Draw, Stroke draw, Checkmark draw
Eine SVG-Kontur scheint sich entlang ihres Pfads selbst zu zeichnen, indem der Dash-Offset animiert wird.
Einsatz
Icons, Logos und Illustrationen
Füge bei [wo] eine „Line Drawing“-Animation hinzu (auch path drawing oder self-drawing SVG genannt).
Jede Linie soll sich scheinbar selbst weich entlang ihres Pfads von Anfang bis Ende zeichnen, und eine zweite Linie wie ein Häkchen folgt direkt nach der ersten.
Spiele sie einmal ab, wenn sie ins Bild kommt, statt sie zu wiederholen, und zeige bei reduzierter Bewegung (prefers-reduced-motion) die fertig gezeichneten Linien.ABCDABCD
Mit der Maus darüberfahren
Text Hover Effect
Auch genannt Gradient Outline Text Hover, Text Fill on Hover
Ein Wort in Umrissschrift wird von einem Verlauf gefüllt oder beleuchtet, der dem Zeiger folgt oder darüber streicht.
Einsatz
Große Display-Wörter, Footer
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.Liquid Fill Text
Auch genannt Water Fill Text
Buchstaben füllen sich mit einer steigenden, wogenden Flüssigkeit.
Einsatz
Ladeanzeigen und verspielte Titel
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.Mehr aus Text
AGBHCIDJEKFL
Mit der Maus darüberfahren
Text 3D Flip
Auch genannt 3D Flip Text Reveal
Buchstaben oder Wörter drehen sich in 3D um eine Achse und zeigen auf ihrer Rückseite den nächsten Text.
Einsatz
Hover-Links und Überschriften
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.ABCDEFGHIJABCDEFGHIJ
Text Distortion
Auch genannt Organic Text Distortion
Der Text verzerrt und kräuselt sich organisch, angetrieben durch Scrollen oder Zeigerbewegung.
Einsatz
Experimentelle Portfolios
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.ABCDEFGHIJKLMNOPQRSTUVWX
Text Generate
Auch genannt Text Generate Effect
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.
Einsatz
Einleitungstexte im KI-Stil
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.