ronak-create/FableCut Source: https://github.com/ronak-create/FableCut

FableCut

一个浏览器视频编辑器，AI 代理可直接驱动。

FableCut 是一款类似 Premiere 的非线性视频编辑器，完全在浏览器中运行——并将整个时间线暴露为一个 JSON 文档。你可以手动编辑它、通过 UI 编辑，或者让 AI 代理（Claude Code、Claude Desktop 或任何支持 MCP/REST 的工具）为你剪辑视频，同时你实时观看时间线更新。零 npm 依赖。一个 node server.js 即可运行。

FableCut 编辑器

为什么它很有趣

大多数“AI 视频”工具将编辑隐藏在 API 之后。FableCut 则相反：项目文件即界面。project.json 描述了媒体、片段、轨道、效果、关键帧和转场——任何能够编写 JSON 的进程都可以编辑视频，而打开的浏览器 UI 通过服务器发送事件在约 150 毫秒内热重载。人类和代理可以同时在同一时间线上工作。

功能

编辑

• 4 条视频轨道 + 3 条音频轨道，支持拖拽、修剪、分割、吸附、撤销/重做
• 时间线多选——橡皮筋选框（在空白轨道区域拖拽），Ctrl/Cmd/Shift+点击添加/移除片段，Ctrl+A 全选，Esc 取消选择。拖拽任意选中片段可移动整个组；Delete 删除所有选中的片段；S 在播放头位置分割所有选中片段。检查器显示“已选择 N 个片段”横幅。
• 节拍和提示标记（播放期间按 M 键踩点）并支持边缘吸附
• 片段上显示实时解码的音频波形
• 画布宽高比预设（16:9、9:16 竖屏、4:5、1:1）+ 安全区域参考线

外观

• 12 种一键滤镜预设（电影感、青橙色、黑白、复古、赛博朋克……）
• 调整图层——一个片段调整其下方所有内容，类似 Premiere 风格
• 完整调色控制：亮度/对比度/饱和度/色相、色温与色调、模糊、灰度/棕褐色/反相、暗角、动态胶片颗粒
• 混合模式（滤色、正片叠底、叠加……）、填充模式（包含/覆盖/拉伸）、逐边裁剪、圆角、水平/垂直翻转
• 色度抠像（绿幕） 带有容差/柔化和溢出抑制
• AI 背景移除（人物抠像，通过 MediaPipe 在浏览器内处理）

运动

• 约 25 个属性的关键帧动画，支持缓动
• 速度曲线——对 speed 添加关键帧，引擎会对视频和导出音频混音进行时间重映射（先快后慢的卷轴效果）
• 摄像机抖动和RGB 分离/色差，均可动画化
• 17 种转场：淡入淡出、滑动、擦除（4 个方向）、缩放、镜头光圈、旋转、模糊、摇镜、故障、弹出

文字

• 动态字幕：打字机、单词弹出、单词滑动、卡拉 OK、字母弹出、波浪、弹跳、抖动
• 霓虹发光，适用于 TikTok 字幕风格
• 字体编辑器：系统字体、自定义字体（library/fonts/）、以及任意 Google 字体名称——自动加载
• 渐变填充、轮廓、背景药丸、字间距、行高、字重、斜体、大写、对齐、柔阴影

动画 SVG 片段

• 一级 svg 片段类型：CSS @keyframes 动画的 SVG 在预览和导出中以逐帧精确方式渲染（合成器可在任意时刻冻结动画）。代理可以创建自己的矢量叠加层——下三分之一、五彩纸屑、闪光——作为纯 .svg 文件。包含起始示例。

重构参考视频

• 提供参考编辑（你喜欢的视频），然后返回一个编辑蓝图：镜头边界、音乐节拍 + BPM、响度曲线、每镜头能量、高潮——以及参考视频的音轨提取到你的媒体中，准备好用你自己的素材重建相同的创意。零额外依赖（ffmpeg 进行解码；起音/节拍检测为纯 Node）。node analyze.js ref.mp4、POST /api/analyze 或 fablecut_analyze_reference MCP 工具。

素材库

• library/ 文件夹作为选项卡在 UI 中显示：元素（叠加图案）、音效、SVG——放入文件，打开的编辑器实时刷新

导出

• 快速导出：浏览器渲染每一帧 + 离线音频混音，ffmpeg 编码为逐帧精确的 CRF-18 MP4（切换标签页时继续渲染）
• 当 ffmpeg 不可用时，实时 MediaRecorder 作为后备方案

快速开始

git clone https://github.com/ronak-create/FableCut.git
cd FableCut
node server.js
# → http://localhost:7777

要求：Node 18+ 和基于 Chromium 的浏览器。环境变量 PATH 中的 ffmpeg 是可选的，但推荐使用（快速导出 + 上传混流）。AI 背景移除在首次使用时从 CDN 下载模型。将媒体放入窗口（或 ./media/），将片段拖到时间线上，编辑，导出。

用 AI 代理驱动

代理所需的一切都在 CLAUDE.md 中——完整的模式、语义和食谱。将任何有能力的模型指向该文件，它就可以端到端操作编辑器。

三个等效的控制界面：

1. MCP（最适合 Claude Code / Claude Desktop）——一次性注册捆绑的零依赖 MCP 服务器：

   claude mcp add -s user fablecut -- node "/fablecut/mcp-server.js"
   

   工具：fablecut_status（自动启动编辑器）、fablecut_docs、fablecut_get_project、fablecut_set_project、fablecut_patch_project、fablecut_import_media、fablecut_analyze_reference。 界面在设计上节省 Token：代理通过小操作（fablecut_patch_project）修补时间线，而不是往返整个文档；读取紧凑的一行一个片段摘要（fablecut_get_project {compact:true}），并且只获取所需的手册章节（fablecut_docs {section:"props"}）。

2. 文件——读取 project.json，修改，递增 revision，写入。UI 实时重载。

3. REST——GET/PUT /api/project、POST /api/upload、GET /api/library，SSE 在 /api/events。完整列表见 CLAUDE.md。

例如：让 Claude Code “将这六个片段按节拍标记裁剪，添加青橙色调，在顶部加上单词弹出字幕，在每个剪辑处添加呼啸声”——然后观看时间线自行重建。或者给它一个参考：“这是我喜欢的视频——分析它并用我的素材和相同音乐重新制作。” 代理调用 fablecut_analyze_reference，获取蓝图（剪辑点、节拍、BPM、能量、高潮、提取的音乐），并用你的素材逐镜头重建结构。

冲突安全的并发编辑：UI、MCP 工具和直接 project.json 写入都遵循相同的 revision 计数器。如果在代理正在工作时你在 UI 中编辑了一个片段，代理的下一次写入将被拒绝（REST API 返回 409 / fablecut_set_project 返回冲突错误），而不是静默覆盖你的更改。类似地，当代理写入取代了尚未保存的本地调整时，UI 会检测到并通过提示告知你，而不是静默丢弃。

项目布局

server.js              零依赖 HTTP 服务器：静态托管、REST API、SSE、ffmpeg 导出流水线
app.js                 编辑器：时间线 UI、合成器、关键帧、文本引擎、SVG 光栅化器、色度抠像、导出器
index.html             单页 UI
style.css              深色编辑器主题
mcp-server.js          stdio MCP 服务器，向 AI 代理暴露编辑器
analyze.js             参考视频分析器：镜头、节拍/BPM、能量、高潮、音乐提取（模块 + CLI）
CLAUDE.md              代理手册（模式 + 食谱）——也通过 fablecut_docs 提供
project.json           你的时间线（首次运行时创建；已加入 .gitignore）
media/                 项目素材（已加入 .gitignore）
analysis/              来自 /api/analyze 的缓存编辑蓝图（已加入 .gitignore）
library/               默认资源：
    elements/          元素
    sfx/               音效
    svg/               SVG
    fonts/             字体
exports/               已完成的渲染（已加入 .gitignore）

创作动画 SVG 叠加层

SVG 使用纯 CSS @keyframes 进行动画。一个约定：永远不要硬编码 animation-delay——改为设置 --d: 0.4s，然后合成器通过暂停所有动画并重新计算其延迟来驱动时间。完整规则和骨架见 CLAUDE.md；工作示例见 library/svg/。

注意

• 仓库包含 20 种 Google 字体（library/fonts/，OFL 许可——参见其中的 LICENSES.md）以及一组自行创作的 SVG 叠加层和动画元素（library/elements/，library/svg/，与仓库其余部分相同为 MIT 许可）。
• library/sfx/ 留给你填充（已加入 .gitignore）：音效网站通常不允许在公共仓库中重新分发其文件，因此 FableCut 不包含——library/sfx/README.md 列出了好的免费来源。
• 导出在浏览器中运行，因为合成器就是浏览器；代理要求你点击导出（或直接从 media/ 使用 ffmpeg 渲染）。

许可

MIT