ivarvong/lantern

Media & Design

Animated, steppable explainers of code changes, rendered to SVG for the browser, Node or Workers.

203
6
TypeScript
MIT
1 day old

The problem

Explaining a code change in motion — an animated diagram of a cache appearing, a rewrite of an arrow — usually means reaching for manim, which drags in Python, LaTeX-adjacent tooling and a Cairo/ffmpeg render pipeline, or hand-writing SVG keyframes that nobody can scrub. Neither gives you a URL for "step 3 of this scene." Lantern re-implements manim's scene model in dependency-free TypeScript and makes every step an addressable, deterministic frame, so an explanation can be a link, a string, or a JSON trace.

What's different

The usual path is manim for programmatic animation or a timeline editor like After Effects/Premiere for hand-authored motion. Lantern sits closer to manim but drops the video render: output is SVG, and the frame at time t is computed by re-running the scene with frames skipped, asserted to be byte-identical to a full playback. The three things that genuinely set it apart: text is embedded glyph outlines, so output does not depend on installed fonts and letter-by-letter Write morphs are exact; scenes have text and structured-trace forms (?scene=&step= deep links, trace.json), which is aimed squarely at agents; and a Mermaid flowchart can be parsed and animated as shapes. The trade-off is scope — no 3D, no LaTeX, no matching-shape morphs — so anything beyond 2D diagram animation hits the wall quickly.

Who it's for

Developers who write technical explainers about code and want them versioned in a repo rather than assembled in a video editor, especially those serving frames from a Worker or wanting per-step links and traces for machine consumption. Anyone making polished marketing motion graphics, 3D scenes, or presentation decks with typography-heavy layouts should stay with manim or a real video tool. Teams wanting collaborative editing should also look elsewhere — the README explicitly says nothing syncs traces yet.

Cost of adoption

Not on npm; you clone the repo, which leans on Node 24's .ts type stripping and runs tests plus a Chromium-based playback gate via playwright-core. Zero runtime dependencies is real, but the dev loop expects a full local toolchain (tsc across multiple projects, esbuild, wrangler for deploy). MIT-licensed. The README is unusually dense — it documents the point-buffer and Bézier model, deterministic seeking, and even an out-of-scope list, so it is honest but expects you to read closely before starting.

Verdict

The project is one day old at the time of writing and already drew about 184 stars a day, ranking #2 on HotRepo's new TypeScript board — a launch spike, not a track record. It is not on the trending daily board and has no Hacker News discussion, so the interest is real but narrow and unproven. The design is opinionated and the determinism/testing story is more rigorous than most animation libraries of this size, which is a good sign for longevity; the missing npm package and small scene API are the immediate friction. Worth a look if animated, linkable code explanations are your job; wait for npm and more examples if you just want diagrams.

Written by AI from the project's README, updated October 25, 2026. The project's own docs are the source of truth.