做视频剪辑工具的人，大多绕不开一个选择：要么用现成的桌面软件，要么自己从零搭一套渲染管线。Miraiclip 的作者选了第三条路——把剪辑器最底层的部分抽出来，做成一个开源引擎，让 UI 层随便用 React、Vue、Svelte 还是原生 JS 来写。

它不是剪辑器应用，是应用下面那一层：项目状态、微秒级时间轴、撤销重做、WebGL 渲染器和导出。作者放出了一个 90 秒的演示，展示用这个引擎搭出来的编辑器长什么样。

打开网易新闻 查看精彩图片

项目是 store，编辑是命令

整个引擎的核心抽象很直接。创建一个项目，就是创建一个 store：

宽度 1920、高度 1080、帧率 30，这些参数在 createProject 时一次性定下。之后所有操作都通过 dispatch 派发命令——加素材、加轨道、加片段，每一步都是一条命令。

这种设计带来的直接好处是撤销重做变得干净。多个编辑动作可以打包进一个 transaction，然后一次 undo() 全部回退。

每一次变更都会以 JSON patches 的形式发出，作者把它作为同步和协作的钩子。

时间单位用的是整数微秒。这个选择解决了一个具体问题：在 24、25、29.97 或 60 帧率下做帧运算，浮点数会漂移，整数微秒不会。

预览和导出共用同一个合成器

剪辑工具最常见的坑是「预览一个样，导出另一个样」。Miraiclip 的处理方式是让导出复用预览的合成器。

解码走 WebCodecs，合成走 WebGL（底层是 PixiJS）。导出时调用 exportProject，指定格式和质量，拿到的文件和你刚才看到的一致。

导出还能跑在 worker 里，也能通过 @miraiclip/server-export 在 Node 环境跑——底层是无头 Chrome，另外提供了一个 miraiclip-export 命令行工具。

用 HTML 和 CSS 做叠加层

字幕、角标、贴纸这类叠加元素，通常要么在画布上画，要么用一套专门的模板语法。Miraiclip 的做法是直接用 HTML 和 CSS。

加一个 HTML 类型的片段，给它一段模板字符串，配上参数，指定像素尺寸。如果打开 animated，CSS 动画会播放，并且逐帧精确地导出。

占位符让每个叠加层自动变成一个表单字段。演示里的编辑器用的就是这套机制来做它的模板和实时代码编辑器。

一个模板，批量出片

模板水合（hydrate）是纯函数、确定性的。给一个模板和一组参数，得到一个文档，再用这个文档创建项目——可以预览、可以编辑、可以导出。

批量渲染在 Node 里跑，输入支持 JSON、NDJSON 或 CSV 行。这意味着同一套模板配上不同的数据行，就能批量产出个性化视频。

让模型来改片子

引擎里还带了一个助手模块。创建一个助手，接上模型，然后直接下指令——比如「在片段之间加溶解转场，让标题弹出来」。

整个请求算作一个撤销步骤，不满意就 undo() 回退。

如果你更习惯用现成的 agent，作者提供了一个 MCP 入口：npx @miraiclip/mcp --project ./video.miraiclip.json。Claude、Codex 或任何 MCP 客户端都能拿到同一套命令，还能看到渲染出来的帧。

盒子里还有什么

  • 79 种效果
  • 带音频交叉淡入淡出的转场
  • 关键帧和动画预设
  • 卡拉 OK 字幕，支持 SRT/VTT 导入
  • 带授权追踪的素材库或 AI 生成音频

状态

项目处于 1.0 之前，迭代很快：API 可能在小版本之间发生变化。作者欢迎提 issue、提问，以及「我试了，X 坏了」这类反馈。

文档和在线示例：https://comaniacs.github.io/miraiclip/
GitHub：https://github.com/comaniacs/miraiclip
Discord：https://discord.gg/7S2XmHBeX