Tegaki verwandelt jede Schrift in animierte Handschrift

Das quelloffene Werkzeug Tegaki zeichnet animierte Handschrift Strich für Strich aus jeder Schriftart, ohne dass jemand die Pfade von Hand anlegt. Auf GitHub sammelte das Projekt rund 3.100 Sterne. Für Frontend-Teams bringt die Bibliothek einen Effekt in Reichweite, der bisher aufwendige SVG-Handarbeit verlangte.

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

Animierte Handschrift auf Websites hieß lange, jeden Buchstaben als SVG-Pfad zu zeichnen und das Timing per Hand zu setzen. Tegaki dreht den Aufwand um und leitet die Striche direkt aus den Umrissen einer Schriftart ab. So entsteht der Schreibeffekt aus einer beliebigen Google-Schrift statt aus mühsamer Vorarbeit.

Das Wichtigste in Kürze

• Tegaki wandelt jede Google-Schrift oder TTF-Datei in eine Strich-für-Strich-Animation, ganz ohne händisch gezeichnete Pfade.
• Die Bibliothek läuft in React, Svelte, Vue, SolidJS, Astro und purem JavaScript, alles unter der freien MIT-Lizenz.
• Ein Streaming-Modus animiert Text, während er aus einer Schnittstelle eintrifft, gedacht für KI-Chatoberflächen.
• Zehn mitgelieferte Schriften decken Schriftsysteme von Lateinisch über Arabisch bis Japanisch ab.

Was steckt hinter Tegaki?

Tegaki ist eine quelloffene JavaScript-Bibliothek, die aus den Glyph-Umrissen einer beliebigen Schrift ein Skelett berechnet und daraus Strichpfade mit Breite und Zeitverlauf ableitet.

Ein Kommandozeilen-Befehl lädt die gewünschte Schrift, extrahiert die Umrisse und packt die Strichdaten in ein kompaktes Bündel. Die Anzeige-Komponenten übernehmen danach Zeilenumbruch, Layout und den Ablauf der Animation. Laut Projektdokumentation braucht keiner der Schritte gezeichnete Pfade oder native Abhängigkeiten.^[1]

Wie unterscheidet sich Tegaki von Vara.js?

Vara.js verlangt für jede Schrift eine von Hand gebaute JSON-Datei, während Tegaki die Strichdaten automatisch aus der Schriftdatei selbst gewinnt.

Genau darin liegt der Bruch mit den bekannten Werkzeugen. Vivus.js animiert nur fertige SVG-Pfade, Vara.js bringt zwar Handschrift, setzt aber je Schrift eine vorbereitete JSON-Beschreibung voraus. Tegaki überspringt diese Vorarbeit durch die automatische Skelett-Berechnung und öffnet den Effekt so für jede der tausenden Google-Schriften.

Der Trend zu leichtgewichtigen Frontend-Werkzeugen zieht sich durch das ganze Jahr: Ein anderes Projekt verwandelt jedes SVG-Icon per Federphysik in ein anderes und ein Schweizer Farbpaletten-Generator gewann sogar einen Design-Preis. Bei der Wahl der UI-Schrift lohnt der Blick auf die Alternativen zu Inter.

Für wen lohnt sich der Blick?

Die freie MIT-Lizenz und die Unterstützung fast aller großen Frontend-Frameworks machen Tegaki für Freelancer, Agenturen und Inhouse-Teams interessant, sobald eine Marke oder ein KI-Chat einen handschriftlichen Auftritt braucht.

Vor dem Einsatz stehen zwei Prüfungen. Dekorative Bewegung sollte den Wunsch nach reduzierter Bewegung achten, denn seit dem 28. Juni 2025 verlangt das Barrierefreiheitsstärkungsgesetz die WCAG-Stufe AA auch von kommerziellen Websites. Eine kommerzielle Schrift als Handschrift einzubinden, verlangt zudem einen Blick auf deren Weblizenz, während die quelloffenen Google-Schriften diese Hürde umgehen.

Der schnellste Test kostet nichts: Ein einziger Aufruf über npx erzeugt schon eine animierte SVG-Zeile aus einem beliebigen Text. Für den dauerhaften Einbau folgt das passende Framework-Paket, ergänzt um eine reduzierte Bewegung als Rückfallebene.

Quelle

[1] Tegaki (Gökhan Kurt): GitHub-Repository und Dokumentation

Mehr Newshunger?

• Morphicons verwandelt jedes SVG-Icon per Federphysik in ein anderes
• Poline: Schweizer Open-Source-Tool für Farbpaletten gewinnt den Swiss Design Award
• CSS text-fit: Der Browser skaliert die Schrift jetzt selbst auf Containerbreite
• Utopia berechnet fluide Typografie und warnt vor der Zoom-Falle
• So wählen Sie die richtige UI-Schrift: 10 Alternativen zu Inter