做網頁手寫動畫太麻煩？試試 Tegaki 這個開源工具
整理版優先睇
Tegaki 係個開源手寫動畫庫，支援任意字體同框架，用編輯器實時預覽，幾分鐘就做到自然書寫效果。
呢篇文章係由一位設計師兼業餘開發者 Rico 分享，佢一直好鍾意用手寫動畫嚟為網頁增加靈動同故事感，但係傳統做法（例如手動描 SVG 路徑、用 After Effects 加 Lottie、或者用其他第三方庫）都好耗時、唔靈活、成本高。佢想解決嘅問題係點樣用低成本、高效率嘅方式實現高質素嘅手寫動畫。整體結論係 Tegaki 呢個開源庫可以將呢件事變得簡單，儘管佢對中文筆畫順序嘅處理未盡完美，但已經大幅降低咗門檻。
Tegaki 嘅核心優勢係支援任意字體（包括 Google Fonts 同上傳自訂字體）、自然流暢嘅逐筆動畫、流式動畫（適合 AI 實時回覆場景）、兼容主流前端框架（React、Vue、Svelte 等），而且輕量無依賴、MIT 開源。最吸引嘅係有在線編輯器，設計師同開發者可以即時輸入文字、調整參數、預覽效果，再一鍵導出代碼直接集成。
作者認為手寫動畫係提升界面視覺嘅高效手法，而家 Tegaki 用極低嘅開發同維護成本解決咗過往嘅痛點，令高質素手寫效果變得簡單可行。佢特別欣賞呢種將複雜事簡單化嘅精神，強烈推薦讀者去試用。
- Tegaki 係一個輕量、開源嘅手寫動畫庫，支援任意字體同主流框架，無需手動描路徑。
- 使用在線編輯器即可實時調整文字、字體、速度等參數，一鍵導出代碼直接集成。
- 相比傳統方案（手動 SVG、AE+Lottie、第三方庫），Tegaki 成本低、靈活性高、支援動態文字同流式動畫。
- 手寫動畫能夠提升頁面嘅故事感同靈動性，而家用 Tegaki 令呢件事變得簡單。
- 開發者同設計師可以立即去在線編輯器試玩，再根據文檔集成到框架；注意中文筆畫可能需要手動微調。
Tegaki GitHub 倉庫
GitHub 上 2.1K Stars 嘅開源項目，包含源碼、文檔同範例。
Tegaki 在線編輯器
可即時試玩、自定義動畫參數，並一鍵導出代碼。
傳統手寫動畫嘅痛點
作者 Rico 作為設計師同業餘開發者，以往每次想做手寫動畫都覺得好折磨。佢分享咗幾種常見嘅傳統做法，但各有缺點：
- 手動 SVG 路徑繪製：用 Illustrator 或 Figma 一筆一筆描出文字路徑，再用 CSS 或 GSAP 做 stroke-dashoffset 動畫。效果好，但改一個字就要重新描一次，極度耗時。
- After Effects + Lottie：喺 AE 整完再導出 Lottie JSON，視覺頂級，但文件大、加載慢，而且無法動態修改文字內容，靈活性好差。
- 第三方庫或 Canvas 手寫模擬：呢類方案多數只支援固定字體，動畫效果生硬，尤其係中英文混排時好難適配。
總括嚟講，傳統方案要唔成本高、要唔靈活，每次都要花好多時間，令手寫效果難以普及。
Tegaki 點樣解決問題
Tegaki 嘅核心亮點非常直接，佢專為 Web 打造，開源免費，而且解決咗上面講嘅所有問題：
- 自然流暢嘅逐筆動畫：節奏可控，細節豐富，唔似生硬嘅 path 動畫。
- 流式動畫支援：當文字由 AI 接口實時返回時，動畫可以同步「手寫」出嚟，好適合 AI 聊天界面或者動態生成內容。
- 框架友好：原生支援 React、Svelte、Vue、SolidJS、Astro 等主流框架，開箱即用。
- 輕量無依賴：純瀏覽器端執行，體積細，MIT 開源，維護成本極低。
呢啲功能令設計師同開發者可以輕鬆做出高質素手寫效果，而唔使再綁死喺某一種工具或者字體上。
在線編輯器同快速上手
作者最欣賞嘅係 Tegaki 提供嘅在線編輯器（gkurt.com/tegaki/generator），成個流程好順暢：
- 1 打開編輯器，實時輸入任意文字，即刻睇到動畫效果。
- 2 調整字體、速度、顏色、粗幼、描邊等參數，進階仲可以自訂動畫細節。
- 3 一鍵導出代碼或者配置，直接複製到項目度用。
設計師可以喺編輯器快速驗證諗法，開發者可以直接拎代碼集成，跨團隊協作成本大大降低。由試用到集成，通常半個鐘內就跑得通。
中文適配情況
Tegaki 支援任意字體，理論上中文字體都用得，但作者實際測試後發現，中文筆畫順序嘅自然處理未係太好，因為中文字形筆畫複雜，佢無辦法完全識別中文書寫習慣。解決方法係通過編輯器手動調整動畫參數，例如逐筆時間或者路徑順序，達到更自然嘅效果。
整體嚟講，對於中文場景，Tegaki 仍然係一個可用嘅工具，只係需要多啲手動微調。
總結同推薦
手寫動畫一直係提升界面視覺嘅高效手法，但過去因為成本高令好多人卻步。Tegaki 用極低嘅開發同維護成本，解決咗手動描路徑、字體限制、動態文字等痛點，令高質素手寫效果變得簡單。
作為設計師同業餘開發者，我一直好鍾意用手寫動畫嚟令網頁更加生動同有故事感。
感。
無論係品牌故事頁、產品登陸頁，定係個人網站、品牌推廣頁，手寫效果都可以突破一般排版，令視覺上有活力。但以前整手寫動畫，真係好折磨人……
而家呢，Tegaki 的確可以解決我部分文字動畫嘅需要。
Tegaki，開源，揀字體生成手寫動畫，有在線編輯器。支援喺主流框架 React、Svelte、Vue、SolidJS、Astro、Web Components 或者原生 JS 入面生成筆畫數據，渲染精美嘅書寫動畫。
項目地址：
GitHub(2.1K⭐): github.com/KurtGokhan/tegaki
在線網站：gkurt.com/tegaki
我平時係點樣做手寫動畫㗎？
傳統方案通常有以下幾種：
手動SVG路徑繪製：用 Illustrator 或 Figma 一筆一筆畫出文字路徑，再用 CSS 或 GSAP 實現 stroke-dashoffset 動畫。效果唔錯，但極之曬時間，改一個字就要重新畫一次。 After Effects + Lottie：喺 AE 整手寫動畫，再匯出 Lottie JSON 檔案。視覺效果一流，但檔案大、load得慢，而且冇辦法動態改文字內容，靈活性好差。 第三方庫或 Canvas 手寫模擬：雖然有啲庫，但大多數只支援固定字體，或者動畫效果生硬，好難適應唔同語言（尤其係中英文夾雜）。
呢啲方案一係成本高、一係唔夠靈活、一係難維護。每次要做手寫效果，都要花好多時間。
Tegaki 手寫動畫嘅解決方案
Tegaki 嘅核心賣點好直接：
支援任意字體：原生兼容 Google Fonts，亦都支援上載自定義字體。無論中文字體定係手寫風格英文字體，都可以輕鬆做到。 自然流暢嘅逐筆動畫：好似真人攞筆一筆一劃咁寫出嚟，節奏可以控制，細節豐富。 支援流式動畫：當文字從 AI 接口即時返嚟時，動畫可以同步「手寫」出嚟。呢一點對 AI 對話界面、即時回覆、動態生成內容等現代場景嚟講，沉浸感直接爆燈。 框架友善：原生支援 React、Svelte、Vue、SolidJS、Astro 等主流前端框架，開盒即用。 輕量無依賴：純瀏覽器端運行，體積細，MIT 開源，維護成本極低。
最令我鍾意嘅係佢嘅在線編輯器：gkurt.com/tegaki/generator
可以實現成個流程：在線編輯器即時預覽 + 自訂 + 一鍵匯出
自訂嘅選項好精細：
即時輸入任何文字，即刻見到動畫效果 調整字體、速度、顏色、粗幼、描邊等參數 高級動畫細節自訂 一鍵匯出代碼或設定，直接複製去項目度
設計師可以喺呢度快速驗證想法，開發者可以直接拎代碼整合，大大降低跨團隊協作成本
點樣快速上手？
先開在線編輯器玩嚇，揾到想要嘅感覺； 跟住文件揀返對應框架整合； 需要更多字體嘅時候，用 CLI 工具自己生成。
成個過程由試用到整合，通常唔使半個鐘就搞得掂。
中文適用情況
Tegaki 支援任意字體，理論上當然支援中文字體啦，但我實際測試過，因為中文字形筆畫比較複雜，喺手寫筆畫順序之間嘅自然處理唔係太好，佢認唔到中文嘅書寫習慣，解決方法可以透過編輯器手動調整動畫。
最後
手寫動畫一向係設計師提升界面視覺嘅有效方法，但就算係簡單嘅手寫動畫實現，都需要好高成本。
Tegaki 用極低嘅開發同維護成本，解決咗手動畫路徑、字體限制、動態文字等難題，令高質素手寫效果變得簡單，呢個都係我非常推薦佢嘅根本原因，雖然佢解決唔到太複雜嘅場景需求，但佢都嘗試將一件曾經複雜又曬時間嘅事，盡量變簡單、靈活、可以隨意調用。
我真係好鍾意呢種精神。
我係 Rico，多謝閲讀！
作為設計師和業餘開發者，我一直很喜歡用手寫動畫來給頁面增加靈動性和故事
感。
無論是品牌故事頁、產品落地頁，或者是個人網站，品牌推廣頁，手寫效果都能夠突破常規的排版，讓視覺靈動有活力。但以前做手寫動畫，真的挺折磨人的……
現在嘛，Tegaki 確實可以解決我的部分文字動畫場景。
Tegaki, 開源, 選擇字體生成手寫動畫，有在線編輯器。支持在主流框架 React、Svelte、Vue、SolidJS、Astro、Web Components 或 原生 JS 中生成筆畫數據，渲染精美的書寫動畫。
項目地址：
GitHub(2.1K⭐): github.com/KurtGokhan/tegaki
在線網站：gkurt.com/tegaki
我平時是怎麼做手寫動畫的？
傳統方案通常有以下幾種：
手動 SVG 路徑繪製 用 Illustrator 或 Figma 一筆一筆描出文字路徑，再用 CSS 或 GSAP 實現 stroke-dashoffset 動畫。效果不錯，但極其耗時，改一個字就要重新描一次。 After Effects + Lottie 在 AE 裏做手寫動畫，再導出 Lottie JSON 文件。視覺效果頂級，但文件體積大，加載慢，且無法動態修改文字內容，靈活性很差。 第三方庫或 Canvas 手寫模擬 雖然有一些庫，但大多隻支持固定字體，或者動畫效果生硬，難以適配不同語言（尤其是中英文混排）。
這些方案要麼成本高、要麼不夠靈活，要麼難以維護。每次要做手寫效果，都得花費不少時間。
Tegaki 手寫動畫的解決方案
Tegaki 的核心亮點非常直接：
支持任意字體：原生兼容 Google Fonts，也支持上傳自定義字體。無論中文字體還是手寫風英文字體，都能輕鬆實現。 自然流暢的逐筆動畫：像真人拿筆一筆一劃寫出來一樣，節奏可控，細節豐富。 流式動畫支持：當文字從 AI 接口實時返回時，動畫可以同步“手寫”出來。這一點對 AI 聊天界面、實時回覆、動態生成內容等現代場景來說，沉浸感直接拉滿。 框架友好：原生支持 React、Svelte、Vue、SolidJS、Astro 等主流前端框架，開箱即用。 輕量無依賴：純瀏覽器端運行，體積小巧，MIT 開源，維護成本極低。
最讓我喜歡的是它的在線編輯器：gkurt.com/tegaki/generator
可以實現全流程：在線編輯器實時預覽 + 自定義 + 一鍵導出
自定義的選項非常精細：
實時輸入任意文字，立即看到動畫效果 調整字體、速度、顏色、粗細、描邊等參數 高級動畫細節自定義 一鍵導出代碼或配置，直接複製到項目裏
設計師可以在這裏快速驗證想法，開發者可以直接拿代碼集成，大大降低了跨團隊協作成本
如何快速上手？
先打開在線編輯器玩一玩，找到想要的感覺； 根據文檔選擇對應框架集成； 需要更多字體時，用 CLI 工具自行生成。
整個過程從試用到集成，通常不到半小時就能跑通。
中文適配情況
Tegaki 支持任意字體，那麼自然是可以支持中文字體的，但是我實際測試中，由於中文字形筆畫的複雜性，在手寫筆畫順序之間的自然處理並不是太好，它無法識別中文的書寫習慣，解決方法可以通過編輯器，進行手動的動畫調整。
最後
手寫動畫一直是設計師提升界面視覺的高效手法，但即便是簡單的手寫動畫實現，都需要較高的成本。
Tegaki 用極低的開發和維護成本，解決了手動描路徑、字體限制、動態文字等痛點，讓高質量手寫效果這件事變得簡單起來，這也是我非常推薦它的根本原因，儘管它解決不了太複雜的場景需求，但是它也嘗試把一件曾經複雜耗時的事情，盡力變成了簡單、靈活、可隨意調用的事。
我真的太喜歡這種精神了。
我是 Rico， 感謝閲讀！