JDhruv14/line-art-animation

项目介绍

这个仓库提供两样东西：一个引导 Claude 构建线稿动画组件的技能，以及一套不依赖第三方库的 TypeScript 绘图库。人物由开放式笔触直接画成 SVG，因此任意尺寸下都保持清晰，并能响应鼠标交互。示例从单个提公文包的行人，扩展到带町屋、茶馆、运河、村民、猫、鸟、船夫、亮灯窗户和昼夜循环的完整街景。

快速使用

在项目内安装 Claude 技能：

mkdir -p .claude/skills
git clone https://github.com/JDhruv14/line-art-animation .claude/skills/line-art-animation

安装后向 Claude 描述想要的动画，例如黎明面包房、提着托盘的面包师和烤箱蒸汽。技能的工作流会读取 SKILL.md、把 lib/ 复制进项目、先展示一个人物供确认，然后逐帧检查动作。

直接运行自带示例，则需要 Node 22.18 或更高版本：

npm install
npm run dev

打开 http://localhost:5173 查看村庄场景。拖动太阳或月亮改变时间，移动鼠标产生风，点击人物、窗户、灯笼、猫、鸟或水面。URL 参数 ?start=0.9、?tau=0.5、?day=30、?debug 分别控制起始时间、固定时间、一天长度和手动步进时间。行人示例展示最小人物结构，村庄演示展示完整场景。

使用绘图库

库模块位于 lib/：ink.ts 负责绘图基元，gait.ts 求解步态，motion.ts 提供弹簧、钟摆和风，daynight.ts 负责昼夜配色。gait() 通过计算生成行走动作而非逐帧关键帧：支撑脚按行进速度后滑，髋部高度由支撑腿可达范围决定。README 给出了一个完整的双腿行走程序，导入这些模块并用 run() 驱动。palette(τ) 返回任意时刻的天空、纸张和墨色，applyPalette() 可整体换色。

导出视频

启动开发服务器后，捕获脚本通过 DevTools 协议驱动无头 Chrome，每张截图之间精确推进一帧，因此结果不受机器速度影响。运行需要本地 Chrome 或 Chromium（或 $CHROME）以及 ffmpeg。README 给出了针对村庄页面的 scripts/capture.ts 命令和把 PNG 序列合成 MP4 的 ffmpeg 命令。另有 scripts/clip.ts，可测量参考视频的循环周期或逐帧暗色区域，用于对齐动作。

使用约束

运行示例需要 Node 22.18 或更高版本。视频捕获需要 Chrome 或 Chromium 和 ffmpeg。库本身不依赖第三方包，使用 TypeScript 编写，并对 lib/ 和行人示例做严格类型检查。项目不提供现成 npm 包，库模块通过复制到项目中使用，Claude 技能也是这样处理。许可证为 MIT。

HotRepo 点评

该仓库出现在 2026-11-10 的新项目榜上，从首次记录的快照起约九个半小时内新增 105 星和 10 个 fork，没有记录到 GitHub 全语言日榜名次。这是发布当天单次快照的观察，不足以判断趋势。技术上值得关注的是分工：Claude 技能负责引导搭建场景，小巧自包含的 TypeScript 核心用步态求解让动作合理，而自带的完整村庄场景直接展示了这组能力，而不是只在文档里描述。