Kinetograph 實測：不開 Chrome 的 Rust 影片引擎，AI 代理 10 秒算出直式短片

懶人包

• Kinetograph 是 Sanat Gupta 在 2026-10-23 開的影片引擎：用 Remotion 的 TSX 寫法或純 HTML 寫影片，Node 跑程式、Rust 擴充模組用 GPU 畫每一格，全程不開 Chrome。2026-11-03 查是 445 stars、npm 版本 0.2.5、官方標明 beta。
• 我在 Windows 加 RTX 4070 上實測 5 秒、150 格的 1080×1920 直式短片：預設 libx264 全程 11.8 秒，改用 NVENC 10.1 秒，換一份 props 重算 7.9 秒。bench 量出單格合成約 9 毫秒，時間大多花在編碼。
• 它從設計就是給 AI 代理用的：每個 CLI 指令都吃 --json，kinetograph mcp 一行開出 14 個 MCP 工具，我用 MCP client 實際呼叫過 compositions 和 still。
• 純 HTML 加 GSAP 頁面也能算，90 格 1280×720 花 2.7 秒；但 Windows 上 @font-face 的相對路徑會被拆壞，指定的字型檔載不到。
• 0.2.5 有幾個坑：README 寫的 init 指令還不存在、中文字型要自己註冊、可變字型的字重沒套上。授權是 PolyForm Small Business，個人和 100 人以下、年營收 100 萬美元以下的公司免費。
• 我的判斷：拿來讓 Agent 批次產研究短片、教學 demo 很順手；公司產品或需要長期穩定 API 的流程，等它出 1.0 再說。

我在 IG 看到一支 Reel 介紹 Kinetograph，文案寫「讓 AI 代理寫程式，就能直接算出一支影片，而且不用開瀏覽器」。我手上已經有用 Playwright 逐格截圖做影片的經驗，那條路最慢的一步就是開瀏覽器截圖。所以我想知道兩件事：它在 Windows 上真的跑得起來嗎？讓 Agent 透過 MCP 出片順不順？

這篇是我在自己電腦上裝起來、做了一支直式短片範本、再讓 MCP client 呼叫它的紀錄。

Kinetograph 是什麼？🎬

一句話：用程式碼描述影片，交給 Rust 和 GPU 算出 MP4 的引擎，不經過瀏覽器。

渲染時 Node 執行你的程式，產出每一格的場景資料，交給 Rust 寫的 napi 擴充模組。模組用 Skia 在 GPU 上排版、上色、合成，再交給 ffmpeg 編碼。聲音用 Web Audio 的 OfflineAudioContext 離線合成。

跟 Remotion、HyperFrames 的差別就在中間那段。那兩個工具都要開無頭 Chrome，一格一格截圖。Kinetograph 自己實作了 CSS、SVG、Canvas 2D、WebGL 的繪製，所以不需要瀏覽器。

怎麼安裝？Windows 上跑得起來嗎？🛠️

README 的安裝只有兩行：

npm install kinetograph
npx kinetograph doctor

我的環境是 Windows 11、Node v24.11.1、RTX 4070。doctor 的輸出：

node v24.11.1 on win32-x64
addon: loaded, version 0.2.5
renderer: Skia GPU (Vulkan)

看到 addon: loaded 和 Skia GPU 就代表 Rust 模組有載入、有吃到顯示卡。Windows 上走的是 Vulkan。

安裝時我碰到 npm 回 ECOMPROMISED，改成在專案資料夾本地 npm i 並另外指定 --cache 目錄才裝起來。這個錯誤跟 npm 快取狀態有關，不一定每台都會遇到。

README 寫的 npx kinetograph init 在 0.2.5 跑不了，會回 unknown command。我去翻 CHANGELOG，init 列在 Unreleased 區，也就是下一版才會有。現在要自己建 src/index.tsx、public/，結構跟 Remotion 專案一樣。

實測：做一支 1080×1920 直式短片 📱

我寫了一支 5 秒、30fps 的直式範本，用到 spring 進場動畫、Canvas 畫的波形、glow 和 grain 特效、Web Audio 合成的音效，標題、副標、三個重點和頁尾都從 props 讀。

上面這張是 kinetograph strip 直接產的縮圖表，每格標了格數和秒數，拿來檢查節奏很方便，也很適合讓 Agent 看圖確認動畫有沒有走對。

渲染指令：

npx kinetograph render src/index.tsx -o out/default.mp4

2026-11-03 在同一台機器上跑三次的結果：

KINETOGRAPH_FFMPEG="$(which ffmpeg)" npx kinetograph render src/index.tsx \
  --encoder h264_nvenc -o out/nvenc.mp4

同一個任務稍早那一輪，我量到的是 libx264 15.1 秒、加 --concurrency 4 9.6 秒、NVENC 7.5 秒。同一台機器前後兩輪差了幾秒，所以數字請看量級，不要看小數點。

瓶頸在哪，用 bench 一看就知道：

stage (ms)       mean       min       max
js              2.175     1.567     3.116
handoff         0.519     0.456     0.640
readback        6.165     5.257     7.577
total           9.274     8.089    11.584

一格畫面從 JS 到 GPU 合成完只要約 9 毫秒，其中 6 毫秒是把畫面從顯示卡讀回來。150 格算下來不到 1.5 秒，剩下的時間都在編碼和混音。

輸出檔我用 ffprobe 和內建的 audio analyze 驗過：

stream|codec_name=h264|width=1080|height=1920|nb_frames=150
stream|codec_name=aac
format|duration=5.000000
integrated loudness -23.9 LUFS
true peak -9.3 dBTP
clipped samples 0

官方數字怎麼看？

IG 文案寫官方發表影片 1184 格、1080p，在筆電上約 26 秒算完。我去 repo 找到官網用的資料檔 packages/site/src/sections/renders.json，2026-11-03 那份寫的是 1184 格、1920×1080、渲染時間中位數 29.24 秒。兩個數字差了 3 秒，應該是不同版本量的，量級一致。CHANGELOG 也寫到 libx264 的預設 preset 改成 veryfast 之後，這支片的編碼從 49 秒降到 28 秒。

renders.json 沒寫是哪台機器量的。render --help 寫明在 macOS 上預設會用 VideoToolbox 硬體編碼；Windows 不會自動切硬體編碼，要自己裝 ffmpeg、指定 NVENC。

換 JSON 就產新片：Agent 怎麼用？🤖

範本的內容全部從 props 讀，所以 Agent 不用改程式，只要寫一份 JSON：

{"title":"line-lab","subtitle":"LINE 丟一個連結，自動產研究短片","points":["抓網頁、查來源、做 POC","Agent 寫 TSX 劇本","Kinetograph 一個指令出 MP4"],"footer":"任務 20261103-171201"}

npx kinetograph render src/index.tsx --props "$(cat props-line.json)" -o out/props.mp4

每個指令加 --json 都回一個 JSON 物件，Agent 不用解析人看的文字：

{"output":"out/json.mp4","encoder":"libx264","width":1080,"height":1920,"fps":30,"frames":150,"ms":9771.97,"audio":true,"compat":{"unsupportedFrames":0,"leftOut":[]}}

compat.unsupportedFrames 這欄很實用：引擎畫不出來的內容會被略過並記在這裡，Agent 看到不是 0 就知道要改寫法。

MCP：一行接進 Claude Code

kinetograph mcp 會在 stdio 開一個 MCP server，每個 CLI 指令對應一個工具。我用官方 MCP SDK 寫了一支小 client 連上去，列出來是 14 個：

tools: compositions, still, render, strip, onion, inspect, lint, check, bench, audio_analyze, track, snapshot, effects, doctor

我實際呼叫了 compositions（約 2.2 秒回傳 1080×1920、150 格、預設 props）和 still（存出第 100 格的 PNG，同時把圖片以 image block 回傳給 client）。

官方文件給的接法，Claude Code 是這一行（這行我沒有在這次實測裡執行，實測走的是上面的 MCP SDK client）：

claude mcp add kinetograph -- npx -y kinetograph mcp

官方另外附兩個 agent skill：kinetograph 管「寫、看、檢查、渲染」的循環，kinetograph-migrate 管 Remotion 專案搬家，用 npx skills add 0xS4N4TG/kinetograph 安裝。

Agent 能自己看 still 回傳的圖、自己跑 lint 找文字溢出，這是我覺得它比「Agent 寫 Remotion 再開 Chrome 渲染」順的地方：整個檢查迴圈都是機器可讀的。

純 HTML 加 GSAP 也能算嗎？🌐

可以。我寫了一頁 1280×720 的長條圖動畫，用 GSAP timeline 做標題下落、副標淡入、六根長條依序長高，<div id="root"> 上用 data-composition-id、data-duration 標明這是一支影片：

npx kinetograph render html/index.html -o out/html.mp4

90 格花 2.7 秒，其中 52 格跟前一格一樣，引擎直接沿用沒有重畫。

動畫是對的，但輸出時有一行警告：

resource: cannot load a resource: c:Usersuserworkspaceline-lab%EF%BF%BD03-171201pochtmlmsjhbd.ttc

@font-face 裡寫的相對路徑被轉成絕對路徑後，反斜線全被吃掉，\2026 還被當成 CSS 跳脫字元變成亂碼，所以我指定的字型檔沒載入。畫面上的中文還是有畫出來，用的是引擎找到的其他字型。我推測路徑裡沒有反斜線加數字的組合就不會觸發，macOS、Linux 用正斜線也不會，但這兩種情況我都沒有另外驗證。

0.2.5 有哪些坑？⚠️

這些都是我這兩輪實測真的碰到的：

誰適合用？授權怎麼算？⚖️

授權是 PolyForm Small Business 1.0.0。README 寫的條件：個人、非營利組織，以及員工少於 100 人且年營收低於 100 萬美元（以 2019 年幣值計）的公司可以免費使用，超過的要買商用授權。

依這次實測，我的建議：

• 適合：讓 Agent 批次產短片（研究摘要、數據動畫、教學片頭）、個人創作、小團隊的行銷素材。props 換內容、--json 回結果、MCP 接 Agent，這三件事都順。
• 先等等：大公司的產品流程（授權要另談）、需要長期穩定 API 的系統（官方明說 1.0 前會變）、重度依賴特定字型排版的中文內容（字重和 Windows 路徑還有問題）。
• 已經在用 Remotion 的人：值得拿一支現有專案跑 doctor <entry> 看哪些格子畫不出來，再決定要不要換。

下一步我會把這個範本接到 line-lab 的研究流程，讓每份研究報告自動附一支直式短片。