Tegaki

产品简介

Tegaki 是一个开源的网页手写动画库与生成器（MIT 协议），能把任何字体——Google Font、上传的 .ttf/.otf——转换成"按真实笔画顺序一笔一画写出来"的动画。库本身提供 React、Svelte、Vue、Nuxt、Solid、Astro、Web Component 和纯 JS 多框架适配，Remotion 视频方案可直接复用 React 组件。配套的 Tegaki Studio 是一个完全运行在浏览器里的免费手写动画生成器，选字体、拖动调参、导出 PNG/GIF/WebM/动效 SVG 或字体包，全部本地完成，不上传任何文件。

核心功能

1. 任意字体笔画抽取：自动从字体中提取每个字形的笔画顺序、方向与宽度，按人手书写的顺序在 Canvas 上绘制。
2. 多框架适配：tegaki（核心）、tegaki/react、tegaki/svelte、tegaki/vue、tegaki/nuxt、tegaki/solid、tegaki/astro、tegaki/wc、Remotion 组件全覆盖。
3. 13 种内置字体：从 Caveat、Italianno 到 Amiri、Atma、Tillana，再到 Klee One（日文）、Nanum Pen Script（韩文）、LXGW WenKai（简中），覆盖拉丁、希伯来、阿拉伯、梵文、孟加拉、日韩简中。
4. 可访问的真实文本：动画层叠加在真实 DOM 文本之上，文字保持可选、可复制、屏幕阅读器可读，动画不影响语义。
5. 丰富的插件系统：内置 glow、taper、rainbow gradient、variation、boil、annotate 等插件，可串联出仿手绘抖动、彩虹渐变、下划线注释等效果；通过 TegakiEngine.registerPlugin 可自定义插件。
6. 流式与可控时间：未受控时自动播放（speed、loop、catchUp 支持流式文本），受控时可指定秒数或百分比，也可读取 --tegaki-progress CSS 变量配合滚动时间线。
7. Studio 在线生成器：浏览器内选 Google Font 或上传字体，调笔画/时序/特效，导出 PNG、GIF、WebM、动效 SVG 或 bundle.ts。

特色优势

• 与 SVG stroke-dasharray 等"假手写"方案相比，Tegaki 用真实的笔画顺序（KanjiVG、Make Me a Hanzi）让汉字与日韩文字看起来真的在按人写。
• 完全本地：浏览器里运行不依赖服务器，Studio 不上传字体文件，开发者可放心集成。
• MIT 协议 + 完整插件 API，开发者可自定义插件、加新字体、扩展到自家产品里。
• 支持编辑输入流：editable 模式下用户每敲一个字就实时写出来，AI 流式输出场景里 token 一到达就被"写"上画布。

应用场景

1. 营销落地页英雄区：让品牌口号在用户视线里"被手写"出来，比静态图更有记忆点。
2. 教育与语言学习 App：用 Tegaki 给字母、汉字加手写示范动画，配合发音或讲解。
3. AI 文本流的可视化：让 ChatGPT/Claude 等模型的流式 token 一边输出一边被"写"出来，提升沉浸感。
4. 数字签名/合同动画：把签名、合同条款做成手写动画，增强仪式感与防伪意味。
5. 视频与短视频制作：用 Remotion 直接渲染手写动画到视频，做课程片头、广告短片。
6. 个人网站与博客：给标题加手写效果，比字体动画更有人味。

适用人群

前端工程师、独立开发者、品牌/营销设计师、教育应用开发者、AI 应用产品经理、需要"差异化排版"的独立创作者。

出品方

Tegaki 由独立开发者 gkurt 主导开发，MIT 协议开源，社区贡献活跃，npm 包名 tegaki。

更新动态

最近大版本补齐了 Solid、Astro、Nuxt、Remotion、Web Component 适配，加入了 editable（实时输入）与流式 catchUp（逐 token 写出），并上线了 Tegaki Studio 在线生成器。

官网链接

• 项目主页与文档：https://tegaki.ink/
• Studio 生成器：https://tegaki.ink/studio/
• GitHub：https://github.com/gkurt/tegaki
• npm：https://www.npmjs.com/package/tegaki