0xS4N4TG/kinetograph

选用指南

AI 根据 README 整理 · 2026/10/29 09:31:36

使用方式

通过命令行使用，支持渲染、提取帧、检查项目等操作，也可通过 MCP 服务器提供接口。

查看 README 依据

determinism shim), `@kinetographdev/audio`, the `kinetograph` CLI, and `@kinetographdev/native` (the addon, `crates/node`). ```sh 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](packages/site/content/docs/guides/agents.mdx) 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

部署要求

需要 Node 22 或更高版本，构建时需要 Rust 工具链和支持 wgpu 的 GPU（macOS 上为 Metal），渲染功能需要 FFmpeg 开发库。

查看 README 依据

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

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)`). ```sh 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](packages/cli/skills/kinetograph/references/INTERNALS.md). ## License

已知限制

当前为 Beta 版本（0.2.5），API 可能变化，部分功能缺失。

查看 README 依据

- **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/`).