Tegaki推出網頁端手寫動畫函式庫，支援任意字型自動生成筆畫
Tegaki推出網頁端手寫動畫函式庫，支援任意字型自動生成筆畫。
Tegaki是一個專為網頁設計的手寫動畫函式庫，能將任何Google Fonts轉化為自然筆畫動畫，無需手動繪製路徑或依賴原生模組。作者Kurt Gokhan因社群需求，將先前示範的動畫（https://x.com/gkurttech/status/2038215831906046170）轉為可重複使用庫，並整合Pretext避免自行重寫文字排版邏輯，現已支援多行文字自動換行（https://x.com/_chenglou/status/2037713766205608234）。
安裝與快速上手
透過npm安裝tegaki，即可立即使用。React範例程式碼極簡：
import { TegakiRenderer } from 'tegaki';
import caveat from 'tegaki/fonts/caveat';
function App() {
return (
<TegakiRenderer font={caveat} style={{ fontSize: '48px' }}>
Hello World
</TegakiRenderer>
);
}
文字會自動依自然節奏逐筆畫繪製，無需額外設定。
框架相容性
Tegaki全面支援主流前端框架，無縫整合：
- React：
tegaki/react - Svelte：
tegaki/svelte - Vue：
tegaki/vue - SolidJS：
tegaki/solid - Astro：
tegaki/astro - Web Components：
tegaki/wc - Vanilla JS：
tegaki/core
此外，也相容Remotion，用於製作開頭影片等動畫內容。
內建字型與自訂生成
庫內預載四款手寫風格Google Fonts，開箱即用：
- Caveat —
tegaki/fonts/caveat - Italianno —
tegaki/fonts/italianno - Tangerine —
tegaki/fonts/tangerine - Parisienne —
tegaki/fonts/parisienne
其他Google Fonts可透過互動生成器（https://gkurt.com/tegaki/generator/）產生自訂bundle，自動提取筆畫資料並打包供框架元件使用。
動畫控制方式
提供靈活控制選項，適應不同場景：
- 程式控制（controlled）：開發者主導動畫進度。
- 非控制（uncontrolled）：自動播放自然時序。
- CSS控制：如運用CSS scroll timelines驅動滾動觸發動畫。
此設計讓動畫不侷限於固定播放，提升互動性。
文件與開發狀態
完整文件見gkurt.com/tegaki，包括入門指南（https://gkurt.com/tegaki/getting-started/）、框架專屬教學、字型生成指南（https://gkurt.com/tegaki/guides/generating-fonts/）及API參考（https://gkurt.com/tegaki/api/tegaki-renderer/）。GitHub程式庫（https://github.com/KurtGokhan/tegaki）列出已知問題，作者計劃近期修復，歡迎提供意見回饋示意興趣。採用MIT授權，npm套件即時可用（https://www.npmjs.com/package/tegaki）。
此庫解決了網頁手寫動畫的痛點，無需複雜依賴，快速實現生動文字效果，適合動畫影片、互動網頁等應用。
Introducing Tegaki, a handwriting animation library for the web. Works with any font or text. pic.twitter.com/hIllUzy7zk
— gokhan (@gkurttech) April 13, 2026
It includes a tool that can generate stroke data for any font. The data is then bundled for use by the framework-specific components. Tegaki supports the most popular frontend frameworks, including React, web components, and vanilla JS.
— gokhan (@gkurttech) April 13, 2026
It works in Remotion too, which is how I created (vibe-coded) the video at the start of the thread.
— gokhan (@gkurttech) April 13, 2026
The animation can be controlled, uncontrolled, or CSS-controlled. So for example, you can use CSS scroll timelines to control the animation.
I wasn't looking forward to re-implementing text layout while writing this library. Thankfully, Pretext came to the rescue. So the library now also works with multiline text and wraps it automatically. https://t.co/Z54Hv76D01
— gokhan (@gkurttech) April 13, 2026
I first demonstrated the handwriting animation here. I wanted to convert it into a reusable library by popular demand. https://t.co/CB7dJvEb18
— gokhan (@gkurttech) April 13, 2026
See the GitHub repo for details. There are some known issues, which I am planning to address soon. Feel free to leave feedback to show interest.https://t.co/tslbyFc8CY
— gokhan (@gkurttech) April 13, 2026