Tegaki 手写动画开源生态全景monorepo 架构、官方示例与 Remotion/Sli.dev 集成完整指南【免费下载链接】tegakiHandwriting animation for the web. Supports any font or text.项目地址: https://gitcode.com/gh_mirrors/teg/tegakiTegaki手書き是一款面向 Web 的手写动画开源库把任意字体逐笔画地写出来无需手工绘制路径、无需原生依赖。它采用 Bun workspaces 搭建的 monorepo 架构内含渲染器、生成器与官网三大包并配套覆盖 8 种框架的官方示例与 Remotion、Sli.dev 集成。生态全景一分钟看懂仓库结构整个仓库围绕生成笔画数据 → 渲染手写动画这条主线组织workspaces声明在根目录 package.json 中workspaces: packages/* → 核心包renderer / generator / website examples/* → 各框架官方示例 e2e/* → 跨框架端到端冒烟测试三大核心包各司其职详见 AGENTS.md包名称职责是否发布packages/renderer/tegaki框架无关渲染引擎 React/Svelte/Vue/Solid/Astro/Web Components 适配器内置 11 款手写字体包✅ npm 公开packages/generator/tegaki-generator从任意字体提取骨架、计算笔顺、生成动画数据支持几何与栅格两条管线 内部使用packages/website/tegaki/websiteAstro Starlight 文档站 交互式 Studio可在线生成字体包 内部使用渲染器内部采用共享核心 轻量适配器的分层设计core/里的 engine.ts 是唯一的动画引擎react/、vue/、svelte/ 等目录只是薄适配层通过子路径导出tegaki/react、tegaki/vue…分别暴露因此同一套引擎逻辑在所有框架中表现一致——这正是 monorepo 带来的最大收益。官方示例8 个框架开箱即用examples/目录是理解 Tegaki 生态的最佳入口每个子目录都是一个可独立构建的完整项目示例技术栈说明examples/vite/Vite React最小 React 集成examples/next/Next.js服务端渲染场景examples/nuxt/Nuxt含 Nuxt 模块集成examples/svelte/Svelte 5组件化集成examples/vue/Vue 3组件化集成examples/solid/SolidJS组件化集成examples/astro/Astro支持 SSR 的静态页examples/vanilla/原生 JS通过tegaki/wc自定义元素使用值得新手关注的是质量保障体系e2e/examples/ 下的 Playwright 配置会为每个示例启动真实构建产物断言渲染画布上确实写出了墨迹、动画持续变化且无页面报错并在 Chromium / WebKit / Firefox 三引擎下运行。也就是说官方示例本身就是回归测试的一部分。Remotion 集成把手写动画变成视频examples/remotion/展示了 Tegaki 与 Remotion用 React 编程式制作视频的配合方式。核心思路是让 Remotion 的每一帧去驱动手写进度在 Root.tsx 中useCurrentFrame()换算出的进度直接传给TegakiRenderer的受控time属性于是视频渲染到第几帧字就写到哪一笔。项目内注册了三个合成Handwriting基础手写、Promo与ScriptsPromo多文字体系宣传片构建脚本见 examples/remotion/package.json——bun --filter tegaki/example-remotion build即可产出 MP4。 关键点受控时间controlled time是 Tegaki 接入任何时间轴系统Remotion、滚动联动、编辑帧任务的通用接口。examples/editframe/中的 Video.tsx 用同样的思路为视频编辑器逐帧推进进度其原理可参考 examples/editframe/README.md。Sli.dev 集成Markdown 幻灯里的动画文字除 Remotion 外Tegaki 官方列出的第二个集成是 Sli.dev——用 Markdown 写演示文稿的开源工具。你只需在幻灯片中使用 Tegaki 的手写组件标题文字就会随放映逐笔写出无需任何额外配置。集成入口与用法汇总在仓库根 README.md 的 Integrations 一节。上手建议与总结如果你想本地跑起来git clone https://gitcode.com/gh_mirrors/teg/tegaki cd tegaki bun install bun dev # 启动官网与交互式 Studio一句话总结Tegaki 的 monorepo 生态 一个公开渲染器 一个内部生成器 一个文档站外加 8 个框架示例和 Remotion/Sli.dev 两条动画出片通路。新手建议按examples/vite→examples/remotion→ packages/renderer/ 源码的顺序阅读从会用平滑过渡到懂它为什么这样设计。️【免费下载链接】tegakiHandwriting animation for the web. Supports any font or text.项目地址: https://gitcode.com/gh_mirrors/teg/tegaki创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考