Typografie, die sich bewegt.
Einsatzfertige Texteffekte für Headlines, Wörter und Zahlen. Gebaut für Hover, Scroll und alles dazwischen.
Systra Picks
Drei Effekte, die wir selbst am häufigsten einbauen.
Alle Typografie-Effekte
Gruppiert danach, wodurch der Effekt losläuft.
Experimentelle Typografie
Effekte, die auffallen sollen. Einer pro Seite reicht.
Wann trägt eine animierte Überschrift?
Typografie-Effekte bewegen die Schrift selbst: Wörter steigen aus einer Maske, eine Zeile zieht beim Lesen zusammen, Buchstaben werden nacheinander scharf, ein Wort wechselt im Takt. Die 58 Effekte hier sind danach sortiert, was sie auslöst: das Erscheinen, das Scrollen, das Hovern oder eine Schleife. Fast jeden kannst du auf der Seite mit deinem eigenen Text ausprobieren, bevor du ihn übernimmst.
Eine animierte Überschrift trägt, wenn sie einmal läuft und danach ruhig steht. Läuft sie in Schleife oder wartet der Leser auf den letzten Buchstaben, kostet sie mehr Aufmerksamkeit, als sie bringt. Für Fließtext ist keiner dieser Effekte gedacht. Die meisten nutzen framer-motion, einige reines CSS. Mit reduzierter Bewegung steht der Text sofort vollständig da.
Passende Guides
Häufige Fragen
Über den Auslöser. Die Seite filtert danach, wodurch der Effekt losläuft: beim Erscheinen, beim Scrollen, beim Hovern oder dauerhaft. Das ist die Entscheidung, die du zuerst triffst, alles andere siehst du der Vorschau an.
Ja. Oben in der Leiste steht "Eigener Text". Was du dort einträgst, übernehmen fast alle Vorschauen sofort. Effekte, die Ziffern oder ein einzelnes Wort brauchen, behalten ihr eigenes Beispiel.
Meistens Framer Motion, bei einigen reicht CSS. Was ein Effekt braucht, steht an jeder Karte und noch einmal in der Detailansicht. Gedacht sind die Komponenten für React mit Tailwind.
Die Effekte fragen prefers-reduced-motion ab und zeigen dann den Endzustand ohne Bewegung. Der Text ist also da, er fliegt nur nicht ein.
Deine Frage war nicht dabei? Wir helfen gern weiter.
Kontakt aufnehmen