Tegaki - Web向け手書きアニメーションライブラリ

tags : JavaScript, TypeScript, React

概要

任意の Google Font を手書きアニメーションに変換する Web ライブラリ。 フォントを指定するだけで、文字がストロークごとに描かれるアニメーションを自動生成する。 手動でパスを作成する必要がなく、ネイティブ依存関係も不要。

仕組み

1. Google Font をダウンロード
2. グリフのアウトラインを抽出
3. スケルトン計算 & ストロークパス追跡
4. 幅・タイミングデータを付与してアニメーション化

特徴

• 対応フレームワーク: React, Svelte, Vue, SolidJS, Astro, Web Components, vanilla JS
• 内蔵フォント: Caveat, Italianno, Tangerine, Parisienne
• カスタムフォント: インタラクティブジェネレータで任意のフォントから生成可能
• ストリーミング対応: API からのテキストストリーミング中にアニメーション実行（AI チャット UI に最適）
• 行折り返し・テキストレイアウト対応

インストール・使い方

npm install tegaki

React の例:

import { TegakiRenderer } from 'tegaki';
import caveat from 'tegaki/fonts/caveat';
 
function App() {
  return (
    <TegakiRenderer font={caveat} style= fontSize: '48px' >
      Hello World
    </TegakiRenderer>
  );
}

リンク

• GitHub: https://github.com/KurtGokhan/tegaki
• ドキュメント: https://gkurt.com/tegaki/