浏览器里剪视频，卡顿、掉帧、导出对不上预览，几乎是每个做过这类项目的人都踩过的坑。有人干脆把底层那套东西单独抽出来，做成了一个开源引擎。

这个项目叫 Miraiclip，MIT 协议开源。作者说得很清楚：它不是一款剪辑应用，而是应用下面那一层——项目状态、微秒级时间线、撤销重做、WebGL 渲染器和导出。界面用什么写随你，React、Vue、Svelte 或者原生 JS 都行。

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

换句话说，它把"做一个网页剪辑器"里最难啃的那部分先替你啃了。

时间用整数微秒，帧率不再漂移

做视频工具的人对浮点数有天然的警惕。时间一旦用小数存，24、25、29.97、60 这些帧率下反复运算，误差就会一点点累积，最后表现为音画不同步或者剪辑点对不齐。

Miraiclip 的做法是把时间统一成整数微秒。作者的原话是，这样帧运算在任何帧率下都不会漂移。这个选择不花哨，但它决定了整个引擎能不能被信任。

项目状态通过 dispatch 驱动，和前端圈熟悉的状态管理思路一致。添加素材、添加轨道、添加片段，都是一个个动作派发进去。

它还提供了事务机制。把若干次编辑包进一个 transaction，然后一次 undo，整组操作一起回退。对用户来说，这就是"我按了一次撤销，刚才那几步全回来了"。

每一次改动都是 JSON 补丁

引擎把每次变更都输出成 JSON patches，通过事件抛出来。作者点明了这个设计的用途：这是同步和协作的钩子。

谁改了哪一段、什么时候改的，都能从补丁流里看到。多人协同编辑视频这件事，底层需要的就是这种可序列化、可回放的变更记录。

渲染和导出这块，解码用 WebCodecs，合成用 WebGL，具体是 PixiJS。关键的一点是：导出复用了预览用的同一个合成器，所以导出的文件和你在预览里看到的一致。

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

HTML 也能当素材，占位符变成表单

除了视频，Miraiclip 支持把 HTML 当作一种片段类型加进时间线。你可以给它一个模板、一组参数、指定宽高，还能开启动画——CSS 动画会正常播放，并且逐帧精确导出。

配合模板的 hydrate 能力，占位符就成了表单字段。作者举的例子是传入名字和主题色，生成一份文档，再把它变成项目，预览、编辑、导出一条龙。这个过程是纯函数、确定性的。

批量渲染在 Node 侧支持 JSON、NDJSON 和 CSV 三种输入格式。做批量出片的人应该能看懂这个组合意味着什么。

AI 助手和 MCP，都算一次撤销

项目里带了一个 assistant 模块，可以接 OpenAI 的对话模型。用法是给一句自然语言指令，比如"在片段之间加溶解转场，让标题弹出来"，助手直接改项目。

作者特意强调了一点：整个请求算作一次撤销步骤。用户不满意，一次 undo 全部还原。这个细节决定了 AI 改稿这件事在剪辑场景里能不能用——改坏了要能一键退回。

如果你更习惯用现成的 agent，项目提供了 MCP 入口。一条 npx 命令就能把同样的指令能力交给 Claude、Codex 或任何 MCP 客户端，而且还能把渲染出来的帧给对方看。

功能清单上，目前有 79 种特效、带音频交叉淡入淡出的转场、关键帧和动画预设、卡拉 OK 字幕并支持 SRT/VTT 导入，以及带授权追踪的素材音频或 AI 生成音频。

1.0 之前，API 还会变

作者对项目状态的描述很直接：pre-1.0，迭代很快，次要版本之间 API 可能发生变化。

他还留了一句话，欢迎 issue、提问，以及"我试了，X 坏了"这类反馈。对一个还在快速演进的底层引擎来说，这种反馈大概比 star 更有用。

文档和在线示例、GitHub 仓库、Discord 社区，三个入口都挂在项目主页上。想动手的人，从那个 90 秒的演示开始看会比较快。