Kugiri zerlegt Text genau dort, wo der Browser ihn umbricht

Zeilenweise eingeblendeter Text auf einer Website hat eine bekannte Schwäche: Ändert sich das Browserfenster, sitzen die Umbrüche der Animation nicht mehr auf den tatsächlichen Zeilen. Das quelloffene Werkzeug Kugiri schneidet Text deshalb erst dort, wo der Browser ihn ohnehin umbricht. Die nur 7,5 Kilobyte große Bibliothek erzeugt so Zeilen-Animationen ohne den typischen Versatz.

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

Text-Splitting-Bibliotheken existieren seit Jahren, doch die meisten berechnen Zeilen und Wörter neu, statt die vorhandenen Umbrüche zu übernehmen. Genau diese Reihenfolge dreht Kugiri um.

Das Wichtigste in Kürze

• Kugiri zerlegt Text in Zeilen, Wörter und Zeichen genau an den Umbrüchen, die der Browser bereits gesetzt hat.
• Statt Wörter in Blöcke zu verpacken, misst die Bibliothek den unveränderten Text mit der Browser-Funktion Range.getClientRects().
• Kugiri ist quelloffen unter MIT-Lizenz, rund 7,5 Kilobyte groß und kommt ohne Fremd-Abhängigkeiten aus.
• Der etablierte Platzhirsch GSAP SplitText ist seit 2025 kostenlos und bringt Barrierefreiheit von Haus aus mit, die Kugiri fehlt.

Was macht Kugiri anders?

Der Kern ist eine andere Messmethode. Klassische Werkzeuge wie GSAP SplitText verpacken jedes Wort in einen eigenen Inline-Block und messen dann dessen Position. Kugiri liest stattdessen den unangetasteten Text mit der Browser-Funktion Range.getClientRects() aus und schneidet ihn erst an den Stellen, an denen der Browser die Zeile ohnehin gebrochen hat.^[1]

Ein Detail zeigt den Unterschied: Bei automatischer Silbentrennung schiebt die Block-Methode getrennte Wörter oft in die nächste Zeile und erhöht damit die Zeilenzahl. Kugiri behält laut Projektbeschreibung die vom Browser gesetzten Trennungen und die korrekte Zahl der Zeilen. Für Animationen, die Zeile für Zeile ablaufen sollen, zählt genau dieser Unterschied.

Was kann Kugiri, was SplitText nicht kann?

International wird der Abstand größer. Für Sprachen ohne Wortzwischenräume wie Japanisch nutzt Kugiri die Browser-Schnittstelle Intl.Segmenter und trennt dort, wo tatsächlich ein Wort endet. Die ältere Block-Methode splittet am Leerzeichen und behandelt einen japanischen Satz als ein einziges Wort. Auch Schreibrichtungen von rechts nach links, senkrechte Sätze und Emoji aus kombinierten Zeichen bleiben erhalten.

Der Preis dafür ist Handarbeit. Kugiri erzeugt eine Momentaufnahme und teilt den Text bei einer Größenänderung des Fensters nicht von selbst neu auf; das übernimmt eigener Code, etwa über einen ResizeObserver. GSAP SplitText gliedert bei jeder Größenänderung und nach dem Laden von Schriften automatisch neu.

Was kostet Kugiri, und für wen lohnt der Einsatz?

Kostenlos und quelloffen: Kugiri steht unter der MIT-Lizenz, lässt sich per npm einbinden und wiegt rund 7,5 Kilobyte, ganz ohne weitere Abhängigkeiten.^[1] Auf GitHub kommt das junge Projekt bislang auf gut 190 Sterne, ist also noch keine breit erprobte Größe.

Für Agenturen und Freelancer im DACH-Raum, die viel mit Typo-Animationen und mehrsprachigen Seiten arbeiten, liefert Kugiri den genaueren Baukasten. Für fertige Barrierefreiheit und automatisches Neu-Aufteilen bleibt GSAP SplitText die bequemere Wahl, das Webflow seit April 2025 kostenlos anbietet und um Screenreader-Unterstützung erweitert hat.^[2] Ein Blick in die Kugiri-Dokumentation klärt vor dem Einbau, ob das manuelle Neu-Aufteilen zum eigenen Projekt passt.

Quellen

[1] Edoardo Lunardi: Kugiri auf GitHub

[2] Webflow: „Webflow makes GSAP 100% free“

Mehr Newshunger?

• CSS Units: Ein Nachschlagewerk misst alle 63 CSS-Einheiten live im Browser
• DialKit: Interface-Parameter live justieren, ohne den Code neu zu laden
• Opensource UI: Über 150 React-Bausteine zum Kopieren, ohne Radix im Unterbau
• Begrenzen Sie die Zahl der Details
• Neurath X: Eine geometrische Schriftfamilie samt Monospace aus Berlin