A TypeScript port of manim — the Mathematical Animation Engine popularized by 3Blue1Brown — that renders the same Scene code in Node (MP4/WebM/GIF/MOV/PNG via ffmpeg) and in the browser (live Canvas-2D playback + WebM, plus an optional WebGL/Three.js backend).

import { render, Scene, Circle, Square, Transform, Create, BLUE, GREEN } from "ecmanim/node";

class Demo extends Scene {
  async construct() {
    const c = new Circle({ radius: 1.5, color: BLUE, fillColor: BLUE, fillOpacity: 0.5 });
    await this.play(new Create(c));
    await this.play(new Transform(c, new Square({ sideLength: 3, color: GREEN })));
    await this.play(c.animate.shift([3, 0, 0]).rotate(Math.PI / 4));
  }
}

await render(Demo, { output: "demo.mp4", quality: "high" });

What makes it different

• TypeScript, build-free in dev. Node 25 runs the .ts sources directly via type-stripping — no compile step to iterate. tsc emits dist/ + .d.ts for publishing and browser bundlers. See npm run build / type-check / test.
• Three render targets, one Scene. The exact same mobject/animation/scene code drives (1) headless Node video, (2) a live browser <canvas> with WebM export, and (3) an optional GPU WebGL/Three.js backend. 3D uses a CPU projection camera with a per-pixel software z-buffer and Gouraud shading, so it renders headlessly with no GPU.
• Plugins, three ways. A native use(plugin) registry (register mobjects, animations, rate functions, colors, scenes), a portable JSON manifest that loads into both ecmanim and Python manim, and a shared Rust→WASM math core callable from JS and Python (verified byte-identical). See docs/plugins.md.
• Near-complete manim parity. ~390 exports, ~120 registered mobjects, ~67 animations, all 45 registered rate functions (51 exported), and the full ~2200-color palette. See the parity table.

Install

npm install            # pulls @napi-rs/canvas + three + harfbuzzjs + yoga-layout as optional deps
# ffmpeg (and ffprobe) must be on PATH for Node video output

@napi-rs/canvas ships prebuilt binaries — no system Cairo required, so it works on NixOS out of the box. Run npx ecmanim checkhealth to verify node, ffmpeg, ffprobe, canvas, and fonts — plus the optional tools (system TTS, TeX, headless Chrome). ecmanim shells out to a few system programs rather than bundling them; see docs/external-tools.md for the full list and what degrades when each is missing.

Quickstart

Node (render to a file)

import { render, Scene, Circle, Text, Create, YELLOW, BLUE } from "ecmanim/node";

class Intro extends Scene {
  async construct() {
    const t = new Text("Hello, ecmanim", { fontSize: 0.8, color: YELLOW, point: [0, 3, 0] });
    await this.play(new Create(t));
    await this.play(new Create(new Circle({ radius: 1.5, color: BLUE })));
    await this.wait(0.5);
  }
}

await render(Intro, { output: "intro.mp4", quality: "medium" });   // low | medium | high | fourk | production

Or from the CLI (see docs/cli.md):

npx ecmanim render intro.ts Intro -q high -o intro.mp4

Browser (live playback + WebM)

<canvas id="stage" width="1280" height="720"></canvas>
<script type="module">
  import { play, record, Scene, Circle, Create } from "ecmanim/browser";

  class Demo extends Scene {
    async construct() { await this.play(new Create(new Circle({ radius: 2 }))); }
  }

  const canvas = document.getElementById("stage");
  await play(Demo, { canvas, quality: "medium" });      // real-time playback
  const blob = await record(Demo, { quality: "high" }); // -> WebM Blob for download
</script>

See examples/browser/index.html for a full page and examples/browser-three/index.html for the WebGL backend.

Backends

| Entry point | Target | Output | Notes | |-------------|--------|--------|-------| | ecmanim | isomorphic core | — | all mobjects/animations/scenes/colors + the plugin API; no renderer glue | | ecmanim/node | Node.js | mp4, webm, gif, mov, png-sequence, png, svg | @napi-rs/canvas → PNG frames piped to ffmpeg; partial-movie caching + sections | | ecmanim/browser | browser (Canvas-2D) | live <canvas> + WebM | play() for real-time, record() → WebM Blob via MediaRecorder | | ecmanim/browser-three | browser (WebGL) | live <canvas> + WebM | Three.js: hardware depth buffer, MSAA, OrbitControls; same play/record API | | ecmanim/authoring | Node | plan IR / formats | plan-IR dry-run, quality gates, pluggable Format lifecycle + llm/tts/render providers (docs/authoring-studio.md) | | ecmanim/studio | Node + browser | live-preview dev server | hot-reloading <manim-player> preview + schema→props controls (docs/authoring-studio.md) |

The Canvas-2D CPU backend is the default and the only one needed for headless Node video. The Three.js backend is a browser-only GPU accelerator that swaps only the draw step (fills → vertex-colored meshes, strokes → line segments, text → billboards). Architecture details: docs/architecture.md.

Two alternate render targets share the same scene graph — see docs/renderers.md:

• SVG / vector output (format: "svg", or the isomorphic SVGRenderer / mobjectsToSVG): resolution-independent, tiny, editable frames. Deterministic, no GPU, no browser. render(Scene, { format: "svg" }) writes a single .svg (with saveLastFrame) or a numbered .svg sequence.
• Opt-in headless GPU (renderGL, Node): renders the Three.js/WebGL backend inside a CDP-accessible Chrome (real per-pixel lighting, MSAA, GPU strokes), headless with no physical GPU (Mesa llvmpipe). Non-deterministic vs. the CPU path, so it stays out of the content-hash cache.

CLI

npx ecmanim render scene.ts MyScene -q high -o out.mp4
npx ecmanim render scene.ts --scene IntroScene --format webm
npx ecmanim render scene.ts -s            # just the final frame as PNG
npx ecmanim render scene.ts -n 2,5        # only play() indices 2..5
npx ecmanim cfg --write                   # write manim.config.json
npx ecmanim init scene.ts                 # scaffold a starter scene
npx ecmanim plugins                       # list registered mobjects/animations/…
npx ecmanim checkhealth                   # node / ffmpeg / canvas / fonts

Full flag and subcommand reference, config-file format, caching, and sections: docs/cli.md.

Plugins

Extend the engine three ways — see docs/plugins.md:

import { use, loadManifest, loadWasm } from "ecmanim";
import heartPlugin from "./examples/plugins/heart-plugin.ts";
import cyberpunk from "./examples/plugins/cyberpunk.manifest.json" with { type: "json" };

use(heartPlugin);        // native: register a Heart mobject, Heartbeat animation, color, rate func
loadManifest(cyberpunk); // portable JSON manifest: colors/rateFunctions/surfaces/shapes (also loads in Python manim)
await loadWasm();         // shared Rust→WASM math core (also callable from Python via wasmtime)

Examples

Render any of these with node examples/<name>.ts (writes to examples/out/):

| File | Shows | |------|-------| | examples/basic.ts | shapes, Create, Transform, FadeOut, Text | | examples/graph.ts | Axes, plot(), ValueTracker, alwaysRedraw, LaggedStart, Indicate | | examples/hello-scene.ts | minimal Scene + nextSection() (used by the CLI docs) | | examples/morph.ts | VText — glyph outlines traced by Write, morphed by Transform | | examples/mathtex.ts | MathTex — LaTeX (Euler's identity, sums, integrals) as Béziers | | examples/threed.ts | ThreeDScene — projection camera orbiting a 3D scene | | examples/surfaces.ts | Sphere, Torus, Cube, parametric saddle — shaded, depth-sorted | | examples/interpenetrate.ts | z-buffer vs painter sorting on a sphere through a plane | | examples/smooth.ts | smooth (Gouraud) vs flat shading on spheres + a torus | | examples/media.ts | ImageMobject + SVGMobject + sound (MP4 with an audio track) | | examples/video.ts | VideoMobject — ingest an external clip (frames + audio), play it in-scene (docs/video.md) | | examples/svg-output.ts | vector output — a single .svg + a numbered .svg sequence (format: "svg") | | examples/render-gl.ts | opt-in headless GPU render via renderGL (needs a CDP Chrome; see docs/renderers.md) | | examples/metadata.ts | schema.org VideoObject + IIIF manifest export — chapters from nextSection() (docs/metadata.md) | | examples/primitives.ts | Timeline + wiggle driver + VectorDecimalNumber + style preset + renderStill (docs/primitives.md) | | examples/audio-reactive.ts | FFT spectrum bars + CaptionTrack + muxed audio (docs/captions-audio.md) | | examples/voiceover.ts | TTS-synced narration with <bookmark> cues (docs/voiceover.md) | | examples/diagram.ts | diagram-as-code + animated board transition via auto-matching (docs/animation-presentation.md) | | examples/interchange.ts | watermarked render + .otio + Lottie export (docs/interchange.md) | | examples/physics.ts | analytic E-field + pendulum + bouncing rigid bodies (docs/physics.md) | | examples/authoring.ts | Format lifecycle → real render + plan-IR dry-run (docs/authoring-studio.md) | | examples/browser/index.html | browser Canvas-2D backend (live + WebM export) | | examples/browser-three/index.html | browser WebGL/Three.js backend (+ "Explore" orbit mode) | | examples/plugins/heart-plugin.ts | native use() plugin | | examples/plugins/cyberpunk.manifest.json | portable cross-language manifest |

Architecture

src/
  core/
    math/vector.ts     [x,y,z] point/vector math + direction constants (UP, RIGHT, …)
    math/bezier.ts     cubic bezier eval, arc approximation, partial-curve splitting
    math/paths.ts      path functions (straight/arc/counterclockwise) for MoveAlongPath etc.
    color.ts           Color class + color utilities
    colors_data.ts     the full ~2200-color palette (core + X11/XKCD/SVG/BS381/AS2700/DVIPS)
    constants.ts       buffers, screen edges, enums (RendererType, LineJointType, CapStyleType)
    types.ts           shared types (RateFunc, …)
  mobject/
    Mobject.ts         base: submobject tree, transforms, bounds, .animate, updaters
    VMobject.ts        bezier shapes, fill/stroke, subpaths, point-count alignment
    geometry.ts        Arc Circle Dot Ellipse Annulus Line Arrow DashedLine Polygon Rectangle Square …
    tips.ts arcs.ts    arrow tips; ArcBetweenPoints, CurvedArrow, Sector, Angle, AnnularSector
    polygram.ts        Polygram, RegularPolygram, Star, RoundedRectangle
    boolean_ops.ts     Union/Difference/Intersection/Exclusion (polygon-clipping)
    matrix.ts table.ts Matrix, IntegerMatrix, DecimalMatrix; Table, MathTable, MobjectTable
    brace.ts           Brace, BraceLabel, BraceBetweenPoints, BraceText
    graph.ts           Graph, DiGraph (network graphs + layouts)
    vectors.ts         Vector, Arrow-based vector helpers
    labeled.ts         LabeledLine, LabeledArrow
    shape_matchers.ts  SurroundingRectangle, BackgroundRectangle, Cross, Underline
    coordinate_systems.ts NumberLine, Axes, NumberPlane, PolarPlane, ComplexPlane, UnitInterval
    functions.ts       ParametricFunction, FunctionGraph, ImplicitFunction
    graphing_scale.ts  LogBase and axis scaling helpers
    probability.ts     BarChart, SampleSpace
    vector_field.ts    VectorField, ArrowVectorField, StreamLines
    surface.ts         Surface/ParametricSurface, Sphere, Torus, Cylinder, Cone, Box, Cube,
                       Prism, Dot3D, Line3D, Arrow3D, ThreeDVMobject (+ caps)
    polyhedra.ts       Polyhedron, Tetrahedron, Octahedron, Icosahedron, Dodecahedron, ConvexHull3D
    value_tracker.ts   ValueTracker, DecimalNumber, Integer, alwaysRedraw
    complex_value_tracker.ts  ComplexValueTracker
    text/Text.ts       Text/MarkupText (Canvas glyphs, .chars, t2c) + RasterText
    text/paragraph.ts  Paragraph, Title
    text/code.ts       Code (syntax-highlighted listings)
    text/variable.ts   Variable (label = tracked DecimalNumber)
    text/tex_extras.ts Tex text-mode helpers
    vectorized_text.ts VText — real glyph outlines as Béziers (opentype.js)
    mathtex.ts         MathTex / Tex / SingleStringMathTex — LaTeX via MathJax → Bézier glyphs (token/part model)
    svg_path.ts        SVG path `d` → cubic-Bézier subpaths (powers MathTex/VText)
    svg_mobject.ts     SVGMobject — load an .svg → animatable VMobjects
    image_mobject.ts   ImageMobject — a raster bitmap in the scene
  scene/
    Scene.ts           play()/wait(), fixed-fps frame emission, sections (nextSection)
    three_d.ts         ThreeDScene, ThreeDCamera (projection), ThreeDAxes
    moving_camera_scene.ts  MovingCameraScene, ScreenRectangle, FullScreenRectangle
    zoomed_scene.ts    ZoomedScene
    vector_space_scene.ts   VectorScene, LinearTransformationScene
  camera/
    multi_camera.ts    MultiCamera
    mapping_camera.ts  MappingCamera
  animation/
    Animation.ts       Animation base, Transform, Create, Write, Fade*, ApplyMethod, MoveTo, …
    composition.ts     AnimationGroup, LaggedStart, LaggedStartMap, Succession, the .animate builder
    extra.ts           GrowFrom*, SpinInFromNothing, Indicate, Flash, Wiggle, Circumscribe, FocusOn, …
    creation_extra.ts  DrawBorderThenFill, Unwrite, TypeWithCursor, SpiralIn, letter/word reveals
    transform_extra.ts TransformFromCopy, MoveToTarget, Restore, ApplyMatrix, ApplyComplexFunction, …
    transform_matching.ts  TransformMatchingShapes, TransformMatchingTex
    movement.ts        Homotopy, SmoothedVectorizedHomotopy, ComplexHomotopy, PhaseFlow
    indication_extra.ts ShowPassingFlash, ApplyWave, Blink
    changing.ts        AnimatedBoundary, TracedPath
    numbers.ts         ChangingDecimal, ChangeDecimalToValue
    specialized.ts     Broadcast, ChangeSpeed
    rate_functions.ts  all 58 rate curves (45 registered by name)
  renderer/
    CanvasRenderer.ts  isomorphic: draws mobjects to any 2D context (+ 3D z-buffer path)
    zbuffer.ts         software rasterizer w/ per-pixel depth buffer (3D)
    geometry_util.ts   mobject tree → GPU-ready vertex buffers (shared by ThreeRenderer)
    ThreeRenderer.ts   WebGL renderer (Three.js) — GPU depth buffer, MSAA
    fonts-node.ts      auto-registers system fonts (@napi-rs/canvas + opentype)
  plugins/
    registry.ts        the shared Registry + use()
    builtins.ts        registers all built-in mobjects/animations/rate-funcs/colors/scenes
    manifest.ts        loadManifest() — portable JSON manifest → registry
    expr.ts            safe recursive-descent expression evaluator (no eval)
  wasm.ts              loader for the shared Rust→WASM math core
  node.ts              Node backend: @napi-rs/canvas → ffmpeg (+ caching, sections)
  browser.ts           Browser backend (Canvas-2D): live play() + record() → WebM
  browser-three.ts     Browser backend (WebGL/Three.js): GPU play() + record()
  index.ts             isomorphic entry point (registers built-ins on import)

packages/
  plugin-spec/         portable manifest JSON Schema + expression grammar (the shared spec)
  manim-portable-plugins/  Python adapter: load the same manifest into Python manim
  manim-wasm/          Rust source (lib.rs) + compiled manim_core.wasm + Python (wasmtime) loader

Deeper module map, rendering pipeline, and registry mechanics: docs/architecture.md.

API parity with manim

| Area | manim | ecmanim | Notes | |------|-------|----------|-------| | Scene | class S(Scene): def construct | class S extends Scene { async construct() } | await this.play(...), await this.wait(t) | | Play | self.play(a, b, run_time=2) | await this.play(a, b, { _playConfig: true, runTime: 2 }) | parallel by default | | .animate | mob.animate.shift(RIGHT) | mob.animate.shift([1,0,0]) | chainable proxy | | Geometry | Circle, Square, Line, Polygon, … | ✅ same | Arc Circle Dot Ellipse Annulus Line Arrow DashedLine Polygon RegularPolygon Triangle Rectangle Square | | Tips / arcs | ArrowTip, ArcBetweenPoints, CurvedArrow, Sector, Angle | ✅ same | tips.ts, arcs.ts — Sector/AnnularSector/Angle/RightAngle | | Polygrams | Polygram, RegularPolygram, Star, RoundedRectangle | ✅ same | polygram.ts | | Boolean ops | Union, Difference, Intersection, Exclusion | ✅ same | via polygon-clipping | | Matrix | Matrix, IntegerMatrix, DecimalMatrix | ✅ same | brackets, entries, get_rows/get_columns | | Table | Table, MathTable, MobjectTable | ✅ same | row/col labels, lines, highlights | | Brace | Brace, BraceLabel, BraceBetweenPoints, BraceText | ✅ same | | | Graphs | Graph, DiGraph | ✅ same | vertices/edges + layouts | | Text (raster) | Text | ✅ Text / RasterText | fast Canvas text, typewriter reveal for Write/Create, .chars, t2c | | Text (vector) | Text (Pango glyph paths) | ✅ VText | real glyph outlines as Béziers (opentype.js) — Write traces, Transform morphs | | Markup | MarkupText | ✅ MarkupText | inline color/style spans | | LaTeX | MathTex, Tex (shells out to LaTeX) | ✅ MathTex, Tex, SingleStringMathTex | MathJax → SVG → Béziers, no LaTeX binary; token/part model, text-mode Tex | | Code / prose | Code, Paragraph, Title, Variable | ✅ same | syntax-highlighted Code, Paragraph, Title, tracked Variable | | Coordinates | Axes, NumberPlane, NumberLine, plot | ✅ same | axes.c2p(x,y), axes.plot(fn) | | Axes helpers | area, Riemann rects, secant/tangent, labels | ✅ same | get_area, Riemann rectangles, secant/tangent lines, axis labels | | Planes | PolarPlane, ComplexPlane, LogBase | ✅ same | polar/complex planes, log-scaled axes | | Function plots | ParametricFunction, FunctionGraph, ImplicitFunction | ✅ same | functions.ts | | Charts | BarChart, SampleSpace | ✅ same | probability.ts | | Vector fields | VectorField, ArrowVectorField, StreamLines | ✅ same | vector_field.ts | | 3D | ThreeDScene, ThreeDAxes, move_camera | ✅ same | projection camera (φ/θ + perspective), moveCamera, ambient rotation, gamma/light, fixed-in-frame | | 3D solids | Sphere, Torus, Cylinder, Cone, Cube, Box, Prism | ✅ same | + caps, Dot3D, Line3D, Arrow3D, ThreeDVMobject | | Polyhedra | Tetrahedron, Octahedron, Icosahedron, Dodecahedron | ✅ same | + Polyhedron, ConvexHull3D | | Surfaces | Surface, checkerboard, shading | ✅ Surface/ParametricSurface | quad-mesh faces, smooth (Gouraud) or flat shading, checkerboard/colorFunc, per-pixel z-buffer | | Creation | Create, Write, Uncreate, DrawBorderThenFill | ✅ same | + Unwrite, SpiralIn, letter/word/typewriter reveals | | Transform | Transform, ReplacementTransform | ✅ same | automatic Bézier point-count alignment | | Transform (matching) | TransformMatchingShapes, TransformMatchingTex | ✅ same | transform_matching.ts | | Transform (extra) | MoveToTarget, Restore, ApplyMatrix, ApplyComplexFunction, … | ✅ same | transform_extra.ts | | Fading | FadeIn, FadeOut (+shift/scale), FadeTransform | ✅ same | | | Growth | GrowFromCenter/Point/Edge, SpinInFromNothing, ShrinkToCenter | ✅ same | | | Motion | MoveAlongPath, Rotate, Rotating, ApplyMethod, Homotopy, PhaseFlow | ✅ same | movement.ts | | Emphasis | Indicate, Flash, Wiggle, Circumscribe, FocusOn, ApplyWave, Blink | ✅ same | | | Groups | AnimationGroup, LaggedStart, LaggedStartMap, Succession | ✅ same | lagRatio timing matches manim | | Changing | AnimatedBoundary, TracedPath | ✅ same | | | Trackers | ValueTracker, DecimalNumber, Integer, ComplexValueTracker, always_redraw | ✅ same | alwaysRedraw; DecimalNumber is raster-backed (see below) | | Updaters | mob.add_updater(fn) | mob.addUpdater((mob, dt) => …) | run each frame during play/wait | | Rate funcs | smooth, rush_into, there_and_back, … (58) | ✅ camelCase (58 exported, 45 registered) | smooth, rushInto, thereAndBack, … | | Colors | WHITE, BLUE, RED, … | ✅ same names + ~2200 palette | X11/XKCD/SVG/BS381/AS2700/DVIPS namespaces + Color.lerp, hex parsing | | Images | ImageMobject | ✅ ImageMobject | positioned, scaled, faded | | SVG files | SVGMobject | ✅ SVGMobject | parses paths/shapes/groups/transforms → animatable VMobjects | | Sound | self.add_sound(file, time) | ✅ scene.addSound(file, {timeOffset, gain}) | Node muxes via ffmpeg; browser plays live | | Cameras | MovingCamera, MultiCamera, MappingCamera | ✅ MovingCameraScene, ZoomedScene, MultiCamera, MappingCamera | | | Vector scenes | VectorScene, LinearTransformationScene | ✅ same | vector_space_scene.ts | | Sections | self.next_section(...) | ✅ scene.nextSection(...) | --save_sections writes per-section videos + JSON index | | Config / caching | manim.cfg, partial-movie cache | ✅ manim.config.{js,json}, partial-movie cache | layered config, content-hash partials, --disable_caching/--flush_cache | | Render targets | -ql/-qm/-qh, mp4/gif/png | ✅ quality presets, mp4/webm/gif/mov/png | + browser (Canvas live + WebM), + WebGL (Three.js) GPU backend | | Renderers | Cairo (2D) / OpenGL (GL) | ✅ Canvas-2D (CPU, Node+browser, z-buffer for 3D) + Three.js (WebGL, browser) | same Scene/mobjects drive both | | Plugins | manim.plugins entry points | ✅ use() + portable JSON manifest + WASM core | manifest loads in ecmanim and Python manim; WASM callable from both |

Honest divergences

• DecimalNumber is raster-backed. It extends RasterText (Canvas glyphs), not vector glyphs, so number labels are drawn as bitmap text rather than Béziers.
• MathTex / VText in the browser need a font/bundler. They expect MathJax and an opentype font to be available (via a bundler, import-map, or setDefaultFont). The Node path auto-initializes both.
• No true LaTeX binary. MathTex/Tex render via MathJax → SVG → Béziers, not a real LaTeX/dvipng toolchain, so exotic LaTeX packages are out of scope.
• 3D is CPU-projection, not GPU-lit. The default renderer is a software projection camera with a per-pixel z-buffer and Gouraud/flat shading — there is no per-pixel Phong lighting model. The optional Three.js backend adds GPU depth and MSAA but the same shading approximation.
• ImageMobject in 3D is drawn at its projected bounding box in the CPU renderer (not perspective-warped); the WebGL backend places it as a true 3D quad.
• Python side of manifest/WASM needs its own runtimes. Loading a manifest into Python manim requires manim installed (manim-portable-plugins[manim]), and calling the WASM core from Python requires wasmtime.

Testing

npm test    # node --test — ~850 tests across 110+ files (math, mobjects, animations,
            # 3D/z-buffer, plugins, manifest, CLI/config, Studio/Player, integration + headless renders)

Building

npm run type-check   # tsc --noEmit (strict-ish; see tsconfig.json)
npm run build        # tsc → dist/ (JS + .d.ts + sourcemaps) for publish/bundlers

Node 25+ runs the .ts sources directly (type-stripping), so no build is needed for local development, the CLI, or the examples — dist/ exists for publishing and browser bundlers via the package exports map (., ./node, ./browser, ./browser-three).

License

MIT