Kodecz
Kodecz is an open-source video rendering engine that turns a web page into an MP4. You write the video in HTML, CSS and JavaScript (React, WebGL, GSAP, Lottie or nothing at all), and Kodecz renders it frame by frame on an NVIDIA GPU with NVENC or on any CPU with x264, without taking a screenshot of every frame. It is an alternative to Remotion and HyperFrames, made to be driven by AI agents.
If Chromium can draw it, Kodecz can render it:
How it works
Two paths, one folder. Other tools take a screenshot of every frame and turn it into a PNG before encoding it; Kodecz never does, with or without a GPU.
Page is your index.html. Chromium draws frame N. On a GPU, that frame stays on the card as a
texture; on the CPU, it is the raw frame Chromium just painted. Either way it goes straight to the encoder,
NVENC on the card or x264 on the processor, and comes out as an MP4 with the audio mixed in. Frame N is
always the same frame, in order, out of order or starting from the middle: same content, same timing.
Related MCP server: Agent Demo Studio
Numbers
Each square is one second. Rendering the same video, Kodecz keeps the processor busy for 10× less time (43.7 s → 4.4 s of CPU) and hands you the MP4 3× sooner (13.6 s → 4.6 s on the clock).
1080p · 150 frames · H.264 · RTX 5090 · how we measured
Against HyperFrames, measured on the same video and the same day: 11× less CPU (22.0 s → 2.0 s) and 2.4×
sooner (6.4 s → 2.7 s) on the GPU. On a machine without a GPU, HyperFrames is slightly ahead on this video, which
embeds a 1080p clip (26.3 s against 28.1 s of CPU); on a 27-second audiogram, Kodecz uses 2.4× less CPU (24.6 s
against 59.9 s). All the numbers, and a script to reproduce them, are in docs/medidas.md.
Kodecz, Remotion and HyperFrames
Kodecz | Remotion | HyperFrames | |
You write the video in | any web page: HTML, CSS, JS, React, WebGL | React components | HTML |
How each frame leaves the browser | GPU texture or the raw painted frame, no screenshot | screenshot ( | screenshot ( |
Encoding | NVENC on the GPU, or x264 on the CPU | ffmpeg, x264 on the CPU by default | ffmpeg, x264 on the CPU by default (NVENC with |
CPU time for the same 1080p video | 4.4 s | 43.7 s | 22.0 s (measured 2026-11-02, next row) |
Same video, all three on the same day (2026-11-02) | 2.0 s CPU, 2.7 s wall | 37.7 s CPU, 9.9 s wall | 22.0 s CPU, 6.4 s wall |
Same video on the CPU only, no GPU | 28.1 s CPU, 7.1 s wall | — | 26.3 s CPU, 6.8 s wall |
1080×1080 audiogram, 814 frames, CPU only | 24.6 s CPU, 9.3 s wall | — | 59.9 s CPU, 12.2 s wall |
License | Apache-2.0 | Remotion License (paid for companies above 3 people) | Apache-2.0 |
Remotion and HyperFrames are good tools, and Kodecz learned from both. The capture methods come from their source code; the CPU numbers are ours, in docs/medidas.md.
Quick start
Status: early (0.1), Linux only, installed from a clone (not on npm yet). It is the engine we render our own videos with. Parts of the code, the internal docs and some media attributes (
data-inicio…) are still in Portuguese.
Requirements: Linux, Node 24, ffmpeg, weston, bubblewrap, and Rust 1.85+ with a C/C++ toolchain (cmake,
ninja): the Chromium host is compiled on your machine, with or without a GPU. For the GPU path, an NVIDIA GPU with
NVENC (tested on an RTX 5090, driver 570+). Without one, the installer sets up the CPU path; HEVC and the transparent
layer need the GPU.
git clone https://github.com/konecz/kodecz && cd kodecz
./instalar.sh # checks the system, installs and renders a test video
npm link # puts `kodecz` on your PATH (or use: node cli/kodecz.ts)
kodecz render my-video/ MyVideo out.mp4 # GPU when there is one, CPU when not./instalar.sh --verificar only says what is missing; ./instalar.sh --sistema also installs the missing apt
packages (with sudo). Details in instalar/LEIAME.md.
Option | What it does |
| HEVC instead of H.264 (GPU only) |
| transparent layer: raw HEVC with alpha ( |
| render M frames starting at frame N (the same frames as a full render) |
| render on the CPU even when there is a GPU |
| GPU only: fails (exit code 3) when there is none |
| skip the audio |
| one frame as PNG, in one to two seconds |
| re-renders the frames you are looking at on every save |
| automatic checks of every frame, without rendering (JSON) |
kodecz render --help lists every option. The render prints one JSON line with the result on stdout. The original
Portuguese names (--placa, --alfa, --de, --quadros, id="motor-video", qps…) still work for now.
Write a video
A video is a folder. index.html declares the size, frame rate and length; everything else is a normal web page.
<script type="application/json" id="kodecz">
{ "id": "MyVideo", "width": 1920, "height": 1080, "fps": 30, "frames": 150 }
</script>
<style>
:root { --fps: 30 }
h1 {
font: 800 120px/1 "Schibsted Grotesk", sans-serif;
animation: in 0.6s cubic-bezier(.3, 0, .2, 1) both;
animation-delay: calc(15 * 1s / var(--fps)); /* enters on frame 15 */
}
@keyframes in { from { opacity: 0; transform: translateY(40px) } }
</style>
<h1>Hello, frame 15.</h1>
<video src="presenter.mp4" data-inicio="0" data-quadros="150"></video>
<audio src="music.wav" data-inicio="30" data-volume="0.6"></audio>The block:
widthandheightare the size in pixels (even numbers, width at least 800, up to 8192),fpsthe frames per second andframesthe length in frames. Theidis the name you pass to the commands. The full format is indocs/formatos/linha-do-tempo.md.Animation: CSS
@keyframes,element.animate(), GSAP and Lottie (bring your own copy). Kodecz pauses the page's timeline and puts every animation atN / fpsseconds before drawing frame N.Canvas and WebGL: define
window.kodecz_frame(n, ms); it runs before each frame and must depend only onn.Video and audio:
<video>and<audio>withdata-inicio(first frame),data-quadros(length in frames),data-recorte(frames cut from the start of the file),data-volumeanddata-velocidade(speed). Kodecz decodes them itself and mixes the audio in a single pass. On the GPU path, H.264 and HEVC video is decoded with NVDEC and composited under the page on the card, never inside the browser.Not allowed:
requestAnimationFrame, timers and the wall clock. They do not follow frame N. The render's JSON line counts the animations that do not follow the page timeline (animacoesSoltas) and the CSS transitions it sent straight to their end (transicoesAoFim).
For AI agents
Kodecz is made for any agent to write video with: a coding agent in a terminal, an agent in your own pipeline, or a script calling a model. Nothing in it is tied to one vendor. The agent needs only what it already handles: files, shell commands, HTML and CSS, and JSON.
The format is plain web. A video is an
index.htmland its files. Any model that writes web pages can write a video, and any tool that edits files can change one.Kodecz blocks (
blocos/): each editing technique (one-line captions, zoom to the end of a sentence, text that avoids the face...) is a folder with aKODECZ.mdin plain Markdown (what, when, parameters, where it came from), the CSS, a snippet to paste and a right and a wrong example. An index lists them all, so an agent can find the right one without reading everything.Automatic checks:
kodecz check my-video/ MyVideolooks at every frame of the page without rendering the video (text over a face, captions on one line, the safe area of a declared destination, contrast over the real background, a zoom that ends with the sentence) and answers with one JSON line plus a picture of each problem, so the agent can fix it before a human looks. It needs a one-timenode conferencia/preparar.ts.Previews in one to two seconds (
kodecz preview), so the agent sees what it wrote instead of guessing.
Install the Kodecz skills
Three skills teach an agent the method: kodecz (make a video: write, preview, check, fix, render),
remotion-to-kodecz and hyperframes-to-kodecz (port a project, with the API mapped one to one). They need Kodecz
installed on the machine (quick start above).
Agent | Install |
Claude Code |
|
Codex, Cursor, Gemini CLI, Copilot and others |
|
Any MCP client | the |
The skills are plain Markdown in skills/, in the open Agent Skills format.
FAQ
Does Kodecz work without a GPU?
Yes. Without an NVIDIA GPU, Kodecz renders on the CPU: Chromium paints in software and the raw frame goes straight to x264. The same folder renders on both, frame for frame.
Is Kodecz an alternative to Remotion?
Yes. Both turn code into video. Remotion asks you to write React components; Kodecz takes any web page. On the same 1080p video with a presenter, Kodecz used 10 times less CPU and finished 3 times sooner on the GPU path.
Which AI agents can use Kodecz?
Any agent that can write files and run commands: Claude Code, Codex, Cursor, Gemini CLI or your own. The format is
plain HTML, the editing blocks are Markdown and the checks answer in JSON. See AGENTS.md.
Is the output deterministic?
Frame N depends only on the page and on N: rendering in order, out of order or from the middle gives the same content at the same moment. In our test compositions the pixels are identical too. In real videos, Chromium can rasterize animated text slightly differently from one run to the next, by up to 2 color levels out of 255, which you cannot see. Timers and the wall clock are not allowed in a composition.
Which formats does it export?
MP4 with H.264 (default) or HEVC (GPU only), a transparent layer as raw HEVC with alpha (--alpha, GPU only, no
audio), and AAC audio mixed from every <audio> and <video> on the page.
Patents
Kodecz contains no video codec. It asks the NVENC encoder in your GPU (or the ffmpeg installed on your system) to
encode H.264 or HEVC. Those formats are covered by patent pools; using them in a product you sell or distribute may
need a license from those pools, as with any software that writes H.264 or HEVC. See docs/patentes.md.
License
Apache-2.0. Third-party notices in NOTICE and
docs/licencas/. The Schibsted Grotesk and IBM Plex Mono fonts in
marca/fontes/ are under the SIL Open Font License.
The Kodecz name and logo are brand assets of Konecz; see docs/marca.md.
Authors
Kodecz was created by Pedro Henrique Lahr and Vanessa Cristine at Konecz. See
AUTHORS.
Available Tools
3 toolscheckCheck a videoARead-only
Run Kodecz's automatic checks on every frame without rendering: text over the presenter's face, captions on one line, the safe area of a declared social destination, contrast over the real background, zoom timing. Returns the JSON result, each problem with its frame, and pictures of the worst frames. ok: false means a rule was broken: fix and check again.
| Name | Required | Description | Default |
|---|---|---|---|
| id | Yes | The id in the page's <script type="application/json" id="kodecz"> block | |
| folder | Yes | Video folder (the one with index.html), absolute or relative to the working directory |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint and closed-world, and the description adds meaningful context beyond them: it is non-rendering (cheap), it reports per-problem frames, and `ok: false` is the failure contract. It stops short of saying whether the 'pictures of the worst frames' are written to disk, which matters for a tool marked read-only.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Front-loaded with the core action and the 'without rendering' qualifier, then the rule list, then the return/failure contract. The rule enumeration is long but each item is a distinct check, so it earns its space; only the run-on list construction costs a point.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With no output schema, the description correctly takes on the return-value burden by naming the JSON result, per-problem frames, and worst-frame images. It is nearly complete for a two-param read-only check, with only the on-disk side effects of the images left unstated.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% and both parameters carry their own descriptions (folder with index.html, id from the JSON script block), so the schema does the work. The description adds no additional parameter semantics, making the baseline 3 correct.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb and resource ('run automatic checks on every frame') and enumerates the exact rule set being validated. The phrase 'without rendering' cleanly separates it from the sibling `render`, so an agent can pick it without opening a schema.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
'fix and check again' implies an iterate-until-ok workflow, which is real guidance. However, it never says when to prefer this over `preview` or when to skip it and go straight to `render`, leaving the sibling routing to inference.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
previewPreview framesARead-only
Draw some frames of a Kodecz video as lossless PNGs (the same pixels as the render, one to two seconds) and return them as images. Use it to look at what you wrote instead of guessing.
| Name | Required | Description | Default |
|---|---|---|---|
| id | Yes | The id in the page's <script type="application/json" id="kodecz"> block | |
| folder | Yes | Video folder (the one with index.html), absolute or relative to the working directory | |
| frames | Yes | Frame numbers, e.g. [0, 45, 149] |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already cover the safety profile (readOnlyHint=true, openWorldHint=false). The description adds genuinely useful behavior the annotations cannot convey: lossless PNGs, pixel-identical to the render, limited to one to two seconds of footage, and returned as images rather than paths.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two sentences, front-loaded with the core action and return format. Every clause earns its place, including the closing rationale for using the tool.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With all three required parameters fully described in the schema and no output schema, the description fills the main remaining gap by explaining that images are returned directly. Minor omissions: no note on cost, latency, or behavior with out-of-range frame numbers.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, with all three parameters documented including frame-number examples, so the schema carries the load. The description adds nothing about parameters, though it does note the 1-2 second scope, which loosely constrains the frame count. Baseline 3 applies.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb and resource ("Draw some frames of a Kodecz video as lossless PNGs") and the return type ("return them as images"). It implies the relationship to `render` by saying the pixels match the render, but never names `render` or `check` to explicitly draw the boundary.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
"Use it to look at what you wrote instead of guessing" gives a concrete motivation and context for choosing this tool over blind edits. It stops short of stating when to prefer `render` or `check` instead.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
renderRender a Kodecz videoAIdempotent
Render a Kodecz video folder to MP4 (GPU with NVENC when there is one, CPU with x264 when not). Returns the render's JSON result line. Run check first.
| Name | Required | Description | Default |
|---|---|---|---|
| id | Yes | The id in the page's <script type="application/json" id="kodecz"> block | |
| cpu | No | Render on the CPU even when there is a GPU | |
| from | No | First frame to render | |
| hevc | No | HEVC instead of H.264 (GPU only) | |
| alpha | No | Transparent layer as raw HEVC with alpha (GPU only, no audio) | |
| folder | Yes | Video folder (the one with index.html), absolute or relative to the working directory | |
| frames | No | How many frames to render from `from` | |
| output | Yes | Output file (.mp4; .hevc with alpha) |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare it is not read-only, is idempotent and non-destructive, and the description usefully adds the GPU/NVENC-vs-CPU/x264 selection rule and the return shape ('JSON result line'). However, it never says what happens to an existing `output` file, whether the render is long-running, or what the result line contains — notable gaps for a file-writing mutation.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two tight sentences: the action and encoding rule come first, the return value and prerequisite follow. Zero filler, and the prerequisite is placed where it will be read before invocation.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With 8 parameters, a mutation profile, and no output schema, the description supplies the key missing pieces: encoding fallback behavior, the return format, and the `check`-first requirement. Overwrite semantics and expected runtime remain unstated, which keeps it from being complete.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so all 8 parameters are already documented in the schema, including the GPU-only constraint on `hevc` and `alpha`. The description's GPU-vs-CPU sentence largely restates the `cpu` parameter's own text, adding little beyond what the structured field already provides.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb (render) and resource (a Kodecz video folder) plus the output format (MP4) and encoder selection logic, so the agent knows exactly what happens. It does not distinguish itself from the `preview` sibling, so it falls just short of a 5.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Gives an explicit prerequisite sequence ('Run `check` first'), which is actionable context an agent would otherwise miss. It offers no guidance about when to choose `preview` instead, so it is clear but not fully discriminating.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
3 tool updates
v0.1.0- First observed
check - First observed
preview - First observed
render
TDQS
Scored across 3 tools
Each tool has a clearly separate role: check validates rules, preview samples frames as images, render produces the final MP4. The descriptions explicitly encode the workflow order (`check` first), so an agent can't mistake one for another.
All three are single, lowercase verbs (render, preview, check) with no casing or style deviation. The pattern is predictable and readable.
Three tools is a tight, well-scoped surface for a render-and-verify pipeline, with no redundancy. It sits at the low end, with no tool for inspecting or listing video folders, which leaves the set slightly thin.
The validate → preview → render lifecycle is covered, including failure reporting with offending frames, so the core loop has no dead ends. Minor gaps exist: nothing to discover or initialize a Kodecz folder and nothing to clean up output artifacts.
Maintenance
Related MCP Connectors
Render AI-written HTML animations to MP4/GIF with music, voiceover and captions.
Generate images, GIFs, videos, and PDFs from HTML, URLs, or templates — from your AI agent.
Render an MP4 from your own images, clips, voice-over and timed captions. JSON to video.
Video production studio for AI agents: AI media, motion graphics as code, timeline and export.
Related MCP Servers
- AlicenseAqualityCmaintenanceRender HTML/CSS/JS/SVG animations into high-quality MP4 videos. Exposes render tools to AI agents using Playwright (Chromium) and FFmpeg, running locally or remote.22MIT
- AlicenseNot gradedqualityAmaintenanceEnables AI agents to create polished product demo videos by controlling a real Chromium browser, recording actions, and rendering 1080p MP4s with narration, captions, and styled overlays.2MIT
- AlicenseNot gradedqualityBmaintenanceEnables AI agents to turn scripts into narrated videos in YouTube 16:9 or Reels 9:16 formats using HTML pages, Remotion compositions, or HyperFrames layouts, with TTS-driven timing, captions, and optional S3 uploads.MIT

Neonix MCPofficial
AlicenseNot gradedqualityCmaintenanceEnables AI agents to create, edit, preview, and export motion-video projects from HTML and CSS as MP4 files through the Model Context Protocol.MIT