# 策展 · X (Twitter) 🔥

> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)

> 作者：gokhan (@gkurttech) · 平台：X (Twitter) · 日期：2026-04-15

> 原始來源：https://x.com/gkurttech/status/2043704940942483824

## 中文摘要

Tegaki推出網頁端手寫動畫函式庫，支援任意字型自動生成筆畫。

Tegaki是一個專為網頁設計的手寫動畫函式庫，能將任何Google Fonts轉化為自然筆畫動畫，無需手動繪製路徑或依賴原生模組。作者Kurt Gokhan因社群需求，將先前示範的動畫（https://x.com/gkurttech/status/2038215831906046170）轉為可重複使用庫，並整合Pretext避免自行重寫文字排版邏輯，現已支援多行文字自動換行（https://x.com/_chenglou/status/2037713766205608234）。

**安裝與快速上手**  
透過npm安裝tegaki，即可立即使用。React範例程式碼極簡：  
```tsx
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）。  

此庫解決了網頁手寫動畫的痛點，無需複雜依賴，快速實現生動文字效果，適合動畫影片、互動網頁等應用。

## 標籤

開源專案, Web, 其他, Tegaki, Google Fonts