A blazingly fast programmatic video engine, made for agents.

Examples · Editor · Get started · The engine · Use with agents

You (or an agent) write a video in TypeScript with Remotion's API, CSS, SVG, Canvas 2D, WebGL shaders and Web Audio; Node runs the code; a Rust GPU compositor, loaded into Node as an N-API addon, draws every frame. Existing Remotion projects render as they are: remotion and @remotion/* imports resolve to Kinetograph's own implementation of them.

The film above is 1,184 frames of 1080p video, sound included, rendered in 26 seconds on a laptop. It is one TypeScript project in examples/launch.

Each clip is an example in this repo. Times are kinetograph render --concurrency 4 on an Apple M4, the median of three runs.

Showcase 928 frames · 1920×1080 · 37 s of video · rendered in 13 s	3D scenes 180 frames · 1920×1080 · 6 s of video · rendered in 2.3 s
Rajz cards 125 frames · 1920×1080 · 5 s of video · rendered in 5.1 s	Video overlay 180 frames · 1920×1080 · 6 s of video · rendered in 1.9 s
Remotion compat test 150 frames · 1200×1000 · 5 s of video · rendered in 2.3 s	Canvas 2D 60 frames · 860×420 · 2 s of video · rendered in 0.6 s
Diorama scene (JSON) 90 frames · 1080×1920 · 3 s of video · rendered in 2.2 s	Papercut card (JSON) 60 frames · 1080×1920 · 2 s of video · rendered in 0.7 s

Three reels made with papercut-explainer, my Remotion library and agent skills for cut-paper explainer reels, rendered by Kinetograph without changes. Times are the fastest of three runs with --concurrency 4 on the same Apple M4.

Ep. 13: Mods 988 frames · 1080×1920 · 33 s of video rendered in 24 s

Ep. 12: Mirofish 879 frames · 1080×1920 · 29 s of video rendered in 31 s

Ep. 10: The War Skill 850 frames · 1080×1920 · 28 s of video rendered in 55 s

kinetograph studio src/index.tsx opens a local editor for a project. The engine draws its preview frames, so what you see is what renders.

• Timeline: one row per shot and audio clip. Repeated components fold into one row, and clicking a bar jumps there. "Show details" opens every layer.
• Readable layers: each layer is named after its component and text, with the file and line it came from.
• Point and ask: click a layer in the preview, or drag a box around several, then tell your coding agent what to change. The agent gets the selection, the source locations and a picture of the area. It talks to the agent over the Agent Client Protocol (ACP), with presets for Claude Code, Codex and Gemini (tested with Claude Code so far), and asks you before the agent edits a file.
• Inspect and render: props, the scene tree, each layer's resolved fields and renders, all in the same window.

Beta, version 0.2.0. It works and renders real projects, but APIs can still change between versions and some features are missing. The core renderer, effects, authoring layer, studio, Remotion compatibility on a native DOM engine (CSS, SVG, Canvas 2D, WebGL fragment shaders) and an own 3D layer are built. The papercut test project renders all 988 of its frames natively. What is left is listed under known issues on the kinetograph site (/docs/known-issues/).

• The DOM engine, and Remotion compatibility on the kinetograph site (/docs/compat/)
• Authoring contract: the TS packages, the addon's API and how elements map to scenes
• Scene format
• Changelog: what changed in each release. 0.2.0 adds GSAP and its free plugins, HyperFrames projects, WebGPU, <Video datamosh>, x264/x265 encoding everywhere through a bundled ffmpeg, SVG pictures and font fallback for symbols and emoji.

flowchart TB
  subgraph project["Your project (TSX)"]
    P["Remotion API · CSS / SVG · Canvas 2D · WebGL · Web Audio<br/>native elements and effects from @kinetographdev/core"]
  end

  subgraph node["Node: the kinetograph CLI, studio and MCP server"]
    B["esbuild bundle<br/>remotion, @remotion/* → @kinetographdev/core"]
    D["determinism shim<br/>Date, Math.random, timers, rAF driven by the frame"]
    R["@kinetographdev/react: React reconciler<br/>runs the tree once per frame"]
    S["browser shims: DOM readback, Canvas 2D and WebGL<br/>contexts that record their calls"]
    A["@kinetographdev/audio<br/>node-web-audio-api, OfflineAudioContext"]
    E["emit: native elements → scene layers<br/>runs of HTML/SVG → DOM islands"]
    B --> D --> R --> E
    R <--> S
  end

  subgraph rust["Rust: the @kinetographdev/native addon (napi-rs)"]
    DOM["kinetograph-dom: DOM engine<br/>blitz-dom + Stylo (CSS) + taffy (layout) + Parley (text),<br/>usvg (SVG); painted into scene layers"]
    C["kinetograph-core: compositor on wgpu<br/>Skia (vectors, text, Canvas 2D), WGSL effects,<br/>GLSL via naga (WebGL), scene3d (glTF, PBR),<br/>ThorVG (Lottie), 2.5D camera, motion blur, layer cache"]
    M["media: FFmpeg decode and encode<br/>(VideoToolbox / libx264)"]
    DOM --> C
    M <--> C
  end

  P --> B
  E -- "scene JSON per frame" --> C
  E -- "island JSON" --> DOM
  A -- "PCM" --> M
  C --> OUT["MP4 / MOV / PNG<br/>studio preview frames"]

No Chrome anywhere in rendering, including canvas and WebGL: every CSS, SVG and canvas feature is ported natively, and Chrome for Testing is used only by tests, as a reference to compare against. Node hosts the engine so every npm package and Web API is there; the engine is a native addon so pixels never cross into JavaScript. Existing crates do text shaping, layout, CSS and rasterising; Kinetograph writes the glue.

Node 22 or later. The npm workspaces are @kinetographdev/scene (scene types and effect helpers), @kinetographdev/react (the reconciler and native elements), @kinetographdev/core (Remotion's API and packages, the frame loop, the determinism shim), @kinetographdev/audio, the kinetograph CLI, and @kinetographdev/native (the addon, crates/node).

npm ci
npm run build                                   # TS packages and a debug addon
npm run build:release -w @kinetographdev/native    # the addon for timing

npx kinetograph still examples/rajz-cards/index.tsx 60 -o out/rajz-60.png
npx kinetograph strip examples/rajz-cards/index.tsx -n 12 -o out/rajz-strip.png
npx kinetograph render examples/rajz-cards/index.tsx -o out/rajz-cards.mp4
npx kinetograph inspect examples/rajz-cards/index.tsx --frame 60 --json

A project imports from remotion and @remotion/* as it would for Remotion (the CLI maps them onto @kinetographdev/core) and from @kinetographdev/core for the native elements and effects. Every command takes --json; npx kinetograph mcp serves the same commands over MCP; Use with agents has the client setup and the agent skill. npm test runs the CPU tests; the GPU ones run with KINETOGRAPH_GPU_TESTS=1.

Use the rustup toolchain (stable, edition 2024) and a GPU that wgpu supports (Metal on macOS); no display is needed. render links FFmpeg, so building needs its development libraries (brew install ffmpeg on macOS).

cargo build --release
./target/release/kinetograph render examples/papercut-card.json -o out/card.mp4

How a frame is made, the code map, the Rust CLI, the layer cache and frame reuse are in packages/cli/skills/kinetograph/references/INTERNALS.md.

PolyForm Small Business License 1.0.0: free for individuals, non-profits, and companies with fewer than 100 people and under 1,000,000 USD (2019) revenue. Larger companies need a commercial licence; see COMMERCIAL.md. Vendored crates keep their own licences (vendor/README.md).

Required Notice: Copyright 2026 Sanat Gupta (https://github.com/0xS4N4TG)