Kinetograph

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. A video can also be a plain HTML page, and HyperFrames projects render as they are too, GSAP timelines included: npx kinetograph render index.html -o out.mp4.

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.

• "Blacksmith Scene" (Edison, 1893) and "Fred Ott's Sneeze" (Edison, 1894), public domain.
• "Armistice Day Parade, Columbus, Ohio, 1927", US National Archives (archive.org/details/111-h-1555), a US government work.
• SMPTE Universal Leader, public domain.
• The handwritten "FILM" and the 16mm film burn are from licensed overlay packs ("Text Animation Overlays" and "Custom Transitions: Film Burns"); they are not in the repo.

Rendered with Kinetograph

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

Papercut explainers

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.

The editor

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.

Status

Beta, version 0.2.5. 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.5 adds motion tracking (kinetograph track), video frames in canvases (onVideoFrame, drawImage of a <video>), the Web Animations API, GPU-deformed 3D models with bevels and shadows from every light, HyperFrames audio effects and modules, and Intel and AMD GPU encoders on Linux.

Architecture

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.

Projects in TSX

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.

HTML pages and HyperFrames projects

A video can be an HTML page instead of a TSX project, and a HyperFrames project renders as it is, with no rewrite and no browser. The root element gives the size and length; GSAP timelines registered in window.__timelines are paused and seeked to each frame's time:

<div id="root" data-composition-id="hello" data-width="1280" data-height="720" data-duration="2">
  <div id="title">Hello, Kinetograph</div>
  <div id="bar"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<script>
  const tl = gsap.timeline({ paused: true });
  tl.to('#bar', { width: 640, duration: 1, ease: 'none' });
  window.__timelines = { hello: tl };
</script>

npx kinetograph still index.html 15 -o frame.png   # the same commands as for a TSX project
npx kinetograph render index.html -o out.mp4       # or the directory that holds index.html
npx kinetograph fetch-deps index.html              # download what the page loads (CDN scripts, modules, media) ahead of time

still, strip, inspect, lint, doctor, studio and render all take the page. A render downloads what the page loads from the web first and pins it in kinetograph.lock.json; --offline never downloads. Clips (data-start, data-duration), nested compositions (data-composition-src), <video> and <audio>, data-fx-chain audio effects and data-color-grading work as in HyperFrames: the details are under "HyperFrames projects" on the kinetograph site's compatibility page (/docs/compat/#hyperframes-projects).

Build from source

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 and pkg-config to find them (brew install ffmpeg pkgconf on macOS). Without pkg-config, set FFMPEG_DIR to the FFmpeg prefix instead (FFMPEG_DIR=$(brew --prefix ffmpeg)).

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.

License

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)