gkurt/tegaki
将任意字体转换为逐笔书写的手写动画，支持 React、Vue、Svelte 等框架。
- Star
- 3,244
- Fork
- 123
- 未关闭 Issue
- 0
- 最近提交
- 9天前
这是什么？
Tegaki 是一个手写动画库，可以把任意字体的文字转换为逐笔书写的动画效果。开发者无需手动绘制路径，也不需要安装原生依赖，选择字体后用组件渲染即可。
核心包提供 React、Svelte、Vue、SolidJS 和 Astro 的封装，同时支持原生 JavaScript 引擎和 Web Components。项目内置了多款手写字体，覆盖拉丁字母、阿拉伯文、希伯来文、天城文、孟加拉文、日文、韩文和简体中文，其他字体可通过在线工作室生成自定义字体包。
命令行工具无需安装即可用一行文字生成循环、单次或静态的手写动画 SVG。文字排版基于编译为 WASM 的 harfbuzz，连字、阿拉伯文连写和从右到左的文字都能正确呈现。
核心功能
- 01可对任意字体逐笔绘制动画，节奏自然。
- 02提供 React、Svelte、Vue、SolidJS、Astro 及 Web Components 的封装。
- 03内置拉丁文、阿拉伯文、希伯来文、日文、韩文和简体中文等手写字体。
- 04命令行工具可通过 npx 直接生成自绘 SVG 文件。
- 05借助 harfbuzz 正确处理连字、阿拉伯文连写和从右到左的文字。
适用场景
- 为营销页或落地页添加手写风格的动画标题。
- 为 README、幻灯片生成动态手写 SVG 标题或横幅。
- 在基于 Remotion 制作的视频中加入手写文字动画。
快速上手
- 1
安装软件包
npm install tegaki - 2
在 React 中使用内置字体的渲染组件
标签
常见问题
- tegaki 是什么？
- 将任意字体转换为逐笔书写的手写动画，支持 React、Vue、Svelte 等框架。 Tegaki 是一个手写动画库，可以把任意字体的文字转换为逐笔书写的动画效果。开发者无需手动绘制路径，也不需要安装原生依赖，选择字体后用组件渲染即可。
- tegaki 可以免费使用吗？用的什么许可证？
- tegaki 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
- tegaki 还在维护吗？
- 活跃维护中。tegaki 最近一次提交是在 2026年10月11日。
- tegaki 适合用来做什么？
- 为营销页或落地页添加手写风格的动画标题。 为 README、幻灯片生成动态手写 SVG 标题或横幅。 在基于 Remotion 制作的视频中加入手写文字动画。
- tegaki 怎么安装和运行？
- 安装软件包: npm install tegaki 在 React 中使用内置字体的渲染组件
- 在哪里获取 tegaki？
- 源代码和安装说明在 GitHub 上：https://github.com/gkurt/tegaki
概要由 AI 根据项目 README 生成；GitHub 数据每日更新。
相关项目
一套经过优化、可自定义的技术 Logo SVG 图标库，提供 npm 包与 React 组件。
2669214TypeScriptMIT更新于 2个月前
面向 React、Next.js、Astro 和原生 HTML 的动态 ASCII 艺术组件库，内置 240 个作品。
93954TypeScriptMIT更新于 3天前
面向 React 与 TypeScript 的手绘 naive 民间艺术风格 SVG 图标库，可作为 AI 编码助手技能使用。
2435TypeScriptMIT更新于 6天前
一个 Claude 智能体技能，可生成可交互的等距 SVG 图解，用真实机械与系统解释技术概念。
1.7万1295JavaScriptMIT更新于 前天