117 CSS-Texteffekte zum Kopieren: Colorion-Bibliothek kommt ohne JavaScript aus

Der slowakische Entwickler Csaba Kissi stellt 117 animierte Texteffekte kostenlos ins Netz, vom Polarlicht-Verlauf bis zur Fallblattanzeige. Jeder Effekt besteht aus reinem CSS und lässt sich als Code oder als Anweisung für einen Coding-Agenten kopieren. In 99 der kopierbaren Schnipsel fehlt allerdings die Regel für Besucher, die Bewegung im System abgeschaltet haben.

drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen

Aurora, Glitch, Neon und Schreibmaschine: Unter text-effects.colorion.co liegen 117 Texteffekte in acht Gruppen.^[1] Eine JavaScript-Bibliothek braucht keiner davon, ein Klick kopiert Markup und Stylesheet.

Das Wichtigste in Kürze

• Die Bibliothek steht laut Website unter MIT-Lizenz und ist auch für Kundenprojekte frei.
• Alle 117 Effekte laufen in Endlosschleife.
• Nur 18 Schnipsel halten an, wenn Besucher im System reduzierte Bewegung eingestellt haben.

Was steckt in der Colorion-Bibliothek?

Jeder Effekt besteht aus wenigen Zeilen HTML und CSS ohne Abhängigkeiten. Die Farben steuern drei Variablen, --ink für den Text und --ink-2 und --ink-3 für Akzente. Ein zweiter Knopf kopiert eine fertige Anweisung für Claude Code, Cursor oder Copilot.^[1]

Bei Effekten, die einzelne Buchstaben animieren, trägt der Container das ganze Wort als aria-label. Die Buchstaben selbst sind für Screenreader ausgeblendet, das Wort wird also nicht buchstabiert.^[2]

Hinter dem Projekt steht ein Einzelentwickler. Kissi legte das Repository am 9. Juli 2026 an, die Effekte 115 bis 117 kamen am 15. Oktober hinzu. Die MIT-Angabe steht in README und FAQ, eine eigene Lizenzdatei fehlt im Repository bisher.^[3]

Was unterscheidet Colorion von Magic UI?

Magic UI liefert Textanimationen als React-Komponenten, Colorion als reines CSS. Die Komponente Text Animate von Magic UI lädt die Animationsbibliothek Motion und kommt über die shadcn-Kommandozeile ins Projekt.^[4] Das Projekt steht ebenfalls unter MIT-Lizenz und zählt auf GitHub 22.688 Sterne.^[5]

Für WordPress-Seiten und statische Landingpages ohne React passt der Colorion-Ansatz besser: Ein Schnipsel landet im HTML-Block oder im Stylesheet des Themes. Texteffekte für React, Next.js und Vite liefert auch Originkit mit 50 animierten Komponenten.

Worauf müssen Sie bei der Barrierefreiheit achten?

Ergänzen Sie in jedem kopierten Schnipsel eine Regel für prefers-reduced-motion, bevor er live geht. Auf der Demoseite hält ein globaler Stil bei dieser Einstellung alle Effekte an. In den Schnipseln steht die Regel aber nur bei 18 von 117 Effekten, zählte Dr. Web am 16. Oktober. Die Agenten-Anweisung verlangt sie dagegen in allen 117 Fällen.^[2]

Die Systemeinstellung allein reicht nicht. Startet eine Animation von selbst, dauert sie länger als fünf Sekunden und läuft sie neben anderen Inhalten, verlangt WCAG 2.2.2 auf Stufe A eine Möglichkeit zum Anhalten.^[6] Die Medienabfrage gilt beim W3C nur als Technik für das AAA-Kriterium 2.3.3.^[7] Den Unterschied beider Kriterien erklärt auch unser Beitrag zur Canvas-Flamme von Carmen Ansio.

Am einfachsten begrenzen Sie die Wiederholungen per animation-iteration-count, sodass ein Effekt nach spätestens fünf Sekunden steht. Für viele Onlineshops gilt seit dem 28. Juni 2025 das Barrierefreiheitsstärkungsgesetz.^[8]

Soll eine Agentur die Animationen übernehmen, finden Sie passende Anbieter im UX/UI-Design-Agentur-Vergleich.

Quellen

Mehr Newshunger?

• Libraries.dev als Agent-Skill: Coding-Agenten lernen sieben UI-Effekte samt Einbauregeln
• fglibs.com: Ein Katalog für UI-Effekte, den KI-Assistenten per MCP abfragen
• SSGOI: Seitenübergänge wie in nativen Apps, ohne die View Transition API
• Fluid Functionalism: 28 shadcn-Komponenten, deren Hover dem Mauszeiger folgt
• CSS-Scroll-Animationen 2026: Wie der Browser die Scroll-Bibliothek ersetzt
• 102 Barrierefreiheitserklärungen von EU-Shops: Nur 44 nennen ein Datum