ivarvong/lantern

选用指南

AI 根据 README 整理 · 2026/10/24 10:56:30

使用方式

通过 npm 命令使用，如 `npm run dev` 启动开发服务器，`npm run see` 查看场景文本，`npm run shot` 生成联系表，`npm run render` 输出 SVG 帧。

查看 README 依据

st.cache = true; // ... } } ``` Register it in `scenes/index.ts`, then: ``` npm run see -- my-scene after # the frame as text, plus the step's state diff npm run shot -- my-scene # contact sheet: the end of every step, as a PNG npm run verify:motion -- my-scene # teleports, pops, cuts, flicker ``` Diagrams can be text: `flowchart(mermaidSource)` parses a Mermaid flowchart, lays it out and returns shapes you can animate ([docs/FLOWCHART.md](docs/FLOWCHART.md)). Scenes can also be data: `sceneFromDoc(doc)` plays a JSON document of nodes, edges,

| one frame as SVG | `renderAt(Scene, t, new SnapshotSink())`, or Worker `GET /frame.svg?scene=&step=` | | one frame as text | `renderText(scene)`, `npm run see`, or Worker `GET /text?scene=&step=` | | state at every step | `traceScene(Scene)`, or Worker `GET /trace.json?scene=` | | every frame | `npm run render -- <scene>` writes `out/frames/<scene>/*.svg` | Deploy: `npm run deploy` (builds `out/site/`, then `wrangler deploy`). ## Commands | | | |---|---| | `npm run dev` | source tree as native ES modules, live reload |

部署要求

需要 Node 24 运行工具和测试，TypeScript 编译需要 tsc。

查看 README 依据

# lantern Animated, steppable explainers for code changes. A zero-dependency JS port of manim's core model that renders to SVG: a live DOM in the browser, strings in Cloudflare Workers or Node. Every step is addressable (`?scene=&step=`), and every scene has a text form and a structured trace for agents. ## Quickstart ``` git clone https://github.com/ivarvong/lantern && cd lantern # not on npm yet; zero runtime dependencies ``` Then: The repo is TypeScript throughout. Node 24 runs the tools and tests as `.ts` directly

(type stripping, so only erasable syntax); `tsc` compiles the library to `dist/`. ``` npm install npm run dev # http://localhost:5173/?scene=pyex-limits, reloads on save, keeps your step npm test # ~8 s; FULL=1 (npm run test:full) checks every frame npm run check # tsc over every project, emits dist/ ``` A scene is a class with an async `construct()`. Steps are markers; `this.state` is what the explanation is about, and it is what traces record: ```ts import { Scene, Rectangle, Text, Labeled, Arrow, FadeIn, Create, RIGHT, TEAL, GOLD } from '../src/index.ts';

已知限制

目前不支持匹配形状的变形（TransformMatchingShapes）、3D、布尔路径操作和 LaTeX，也不支持协作同步。

查看 README 依据

| `MANIM_DIR=… npm test` | also diffs rate functions and curve subdivision against manim's own code | | `npm run see`, `shot`, `render` | look at a scene: text, contact sheet, SVG frames | | `npm run trace`, `profile`, `seek`, `ab`, `hitch` | performance ([docs/PERF.md](docs/PERF.md)) | | `npm run fonts` | re-subset the embedded fonts (needs `pip install fonttools brotli`) | ## Out of scope, for now - Matching morphs (`TransformMatchingShapes`): glyphs pair by index, not by shape. - 3D, boolean path ops, LaTeX. - Rigid moves as SVG `transform` attributes: every move rewrites points.

- Collaboration: the trace and doc formats are diffable, but nothing syncs them yet.