[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$f1gvq6jgmwo461":3},{"code":4,"message":5,"data":6,"timestamp":26},10000,"success",{"full_name":7,"position":8,"description":9,"language":10,"stars":11,"forks":12,"stars_gained":13,"age_days":14,"hn_threads":15,"one_liner":16,"summary_md":17,"topic":18,"github_topics":21,"license":22,"homepage":23,"updated_at":24,"history":25},"ivarvong\u002Flantern",3,"Animated, steppable code explainers. Zero-dependency TypeScript, SVG output, browser and Cloudflare Workers.","TypeScript",207,6,153,1,[],"把代码改动讲成可逐步寻址的动画，输出 SVG，可跑在浏览器、Node 或 Workers。","## 解决什么问题\n\n想用动画讲清楚一段代码改动——比如缓存怎么出现、箭头怎么重画——通常只能上 manim：Python 环境、LaTeX 相关工具链、Cairo\u002Fffmpeg 渲染管线一整套。或者手写 SVG 关键帧，但没人能拖动到中间某一帧。两条路都给不了你\"这个场景第 3 步\"的 URL。Lantern 用零依赖 TypeScript 重写了 manim 的场景模型，把每一步变成可寻址、确定性的帧，于是一段讲解可以是一条链接、一段文本或一份 JSON trace。\n\n## 有什么不同\n\n常见做法是 manim 做程序化动画，或用 After Effects\u002FPremiere 这类时间线软件手工合成。Lantern 更靠近 manim，但砍掉了视频渲染：输出是 SVG，取 t 时刻的帧靠跳帧重跑场景，测试断言它与完整播放逐字节一致。真正拉开差距的有三点：文本用内嵌字形轮廓，不依赖系统安装的字体，逐字母 `Write` 和字形间 `Transform` 都精确；场景有文本形式和结构化 trace（`?scene=&step=` 深链、`trace.json`），明显是冲着 agent 去的；还能解析 Mermaid 流程图并把它当形状来动画。代价是范围：没有 3D、没有 LaTeX、Transform 字形按序号配对而非按形状，超出 2D 示意图动画很快就到边界。\n\n## 适合谁\n\n写代码技术讲解、希望把动画放进仓库做版本管理而不是在视频软件里拼的开发者，尤其是想从 Worker 出帧、要每一步可链接可追踪的场景。追求精致品牌动效、3D 场景或排版复杂的演示文稿的人，还是用 manim 或正经视频工具。想多人协作编辑的团队也别来——README 明说 trace 和文档格式虽然可 diff，但还没有任何同步机制。\n\n## 上手成本\n\n没上 npm，得 clone 仓库；依赖 Node 24 的 `.ts` 类型剥离，测试和基于 Chromium 的播放校验走 playwright-core。\"零运行时依赖\"是真的，但开发环节要求完整本地工具链（多项目 tsc、esbuild、部署用 wrangler）。MIT 协议。README 信息密度很高，把点缓冲区、贝塞尔模型、确定性 seek 乃至\"暂不做\"清单都写清楚了，诚实，但也要求你认真读完再动手。\n\n## 点评\n\n项目目前只有一天大，已经日均涨约 184 星，在 HotRepo 的新 TypeScript 榜排到第 2——这是发布冲高，不是长期战绩；它没上过 GitHub Trending 日榜，也没有 Hacker News 讨论，关注真实但窄且未经验证。设计上很有主张，确定性与测试的严谨程度超过多数同体量动画库，对长期维护是好兆头；眼下最大的摩擦是没发包和场景 API 偏小。如果\"可链接的代码动画讲解\"就是你的工作，值得一看；只是想要示意图的话，等它上 npm、示例多一些再说。",{"slug":19,"name":20},"media","多媒体与设计",[],"MIT","https:\u002F\u002Flantern.ivar.workers.dev","2026-10-25T01:35:48Z",[],1792918728]