FableCut——一个可由 AI 代理驱动的浏览器视频编辑器（零依赖）

一个可由 AI 代理驱动的浏览器视频编辑器。

视频/嵌入内容：FableCut 演示视频

FableCut 是一个 Premiere 风格的非线性视频编辑器，完全运行在你的浏览器中——并将它的整个时间线暴露为一个 JSON 文档。你可以手动编辑它、通过 UI 编辑它，或者让 AI 代理（Claude Code、Claude Desktop，或任何支持 MCP/REST 的服务）在你观看时间线实时更新的同时帮你剪辑视频。

零 npm 依赖。只需要一个 node server.js。仅此而已。

大多数“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、逐字母弹出、波浪、弹跳、抖动
• 霓虹发光，打造抖音风格的字幕效果
• 字体编辑器：系统字体、可直接放入的自定义字体（library/fonts/）、以及通过名称加载任意 Google 字体——自动加载
• 渐变填充、描边、背景药丸形状、字符间距、行高、字重、斜体、大写、对齐、柔和阴影

动画 SVG 片段

• 一个一级的 svg 片段类型：CSS @keyframes 动画的 SVG 在预览和导出中都可精确到帧渲染（合成器可在任意时刻冻结动画）。代理可以编写自己的矢量叠加层——如字幕条、五彩纸屑、闪光——作为普通的 .svg 文件。已附带入门示例。

复刻参考视频

• 给它一个参考剪辑（你喜欢的短视频），会返回一个剪辑蓝图：镜头边界、音乐节拍 + BPM、响度曲线、每个镜头的能量、高潮点——同时参考视频的音乐轨道会被提取到你的媒体库中，让你可以用自己的素材重建相同的创意。完全零额外依赖（ffmpeg 负责解码；起音/速度检测使用纯 Node.js 实现）。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 的浏览器。ffmpeg 在 PATH 中为可选项但推荐使用（快速导出 + 上传重封装）。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，以及 /api/events 上的 SSE。完整列表参见 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 向 AI 代理公开编辑器的 stdio MCP 服务器 analyze.js 参考视频分析器：镜头、节拍/BPM、能量、高潮、 音乐提取（模块 + CLI） CLAUDE.md 代理手册（模式 + 操作指南）——同时由 fablecut_docs 提供 project.json 你的时间线（首次运行时创建；被 gitignore） media/ 项目素材（gitignore） analysis/ 缓存的来自 /api/analyze 的编辑蓝图（gitignore） library/ 默认资源：elements/ sfx/ 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

A browser video editor that AI agents can drive.

fablecut-demo-720p.mp4

FableCut is a Premiere-style non-linear video editor that runs entirely in your browser — and exposes its whole timeline as one JSON document. Edit it by hand, from the UI, or let an AI agent (Claude Code, Claude Desktop, or anything that speaks MCP/REST) cut your video for you while you watch the timeline update live.

Zero npm dependencies. One node server.js. That's it.

Most "AI video" tools hide the edit behind an API. FableCut flips that: the project file is the interface. project.json describes media, clips, tracks, effects, keyframes and transitions — any process that can write JSON can edit video, and the open browser UI hot-reloads within ~150 ms via server-sent events. A human and an agent can work on the same timeline at the same time.

Editing

• 4 video tracks + 3 audio tracks, drag/trim/split/snap, undo/redo
• Timeline multi-select — rubber-band marquee (drag on empty track area), Ctrl/Cmd/Shift+click to add/remove clips, Ctrl+A to select all, Esc to deselect. Drag any selected clip to move the whole group; Delete removes all selected; S splits all selected at the playhead. Inspector shows an "N clips selected" banner.
• Beat & cue markers (tap M on the beat during playback) with edge snapping
• Real decoded audio waveforms on clips
• Canvas aspect presets (16:9, 9:16 reels, 4:5, 1:1) + safe-area guides

Look

• 12 one-click filter presets (cinematic, teal-orange, noir, vintage, cyberpunk…)
• Adjustment layers — one clip grades everything below it, Premiere-style
• Full grade controls: brightness/contrast/saturation/hue, temperature & tint, blur, grayscale/sepia/invert, vignette , animated film grain
• Blend modes (screen, multiply, overlay…), fit modes (contain/cover/stretch), per-edge cropping, corner radius, flip H/V
• Chroma key (green screen) with tolerance/softness + spill suppression
• AI background removal (person cut-out, in-browser via MediaPipe)

Motion

• Keyframe animation on ~25 properties with easing
• Speed ramps — keyframe speed and the engine time-remaps video and the export audio mix (the fast-into-slow-mo reel move)
• Camera shake and RGB-split/chromatic aberration , both animatable
• 17 transitions: fades, slides, wipes (4 directions), zoom, iris, spin, blur, whip-pan, glitch , pop

Text

• Kinetic captions: typewriter, word-pop, word-slide, karaoke, letter-pop , wave , bounce , shake
• Neon glow for that TikTok caption look
• Font editor: system fonts, drop-in custom fonts (library/fonts/), and any Google Font by name — loaded automatically
• Gradient fills, outline, background pills, letter-spacing, line-height, weights, italic, uppercase, alignment, soft shadows

Animated SVG clips

• A first-class svg clip kind: CSS-@keyframes-animated SVGs render frame-accurately in preview and export (the compositor freezes the animation at any time). Agents can author their own vector overlays — lower-thirds, confetti, sparkles — as plain .svg files. Starters included.

Remake a reference video

• Give it a reference edit (a reel you like) and get back an edit blueprint : shot boundaries, music beats + BPM, a loudness curve, per-shot energy, the drop — plus the reference's music track extracted into your media, ready to rebuild the same idea with your own footage. Zero extra dependencies (ffmpeg does the decoding; onset/tempo detection is plain Node). node analyze.js ref.mp4, POST /api/analyze, or the fablecut_analyze_reference MCP tool.

Asset library

• library/ folders surface as tabs in the UI: Elements (overlay art), Sound FX , SVG — drop files in, the open editor refreshes live

Export

• Fast export: browser renders every frame + an offline audio mix, ffmpeg encodes a frame-accurate CRF-18 MP4 (keeps rendering if you switch tabs)

• Realtime MediaRecorder fallback when ffmpeg isn't available

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

Requirements: Node 18+ and a Chromium-based browser. ffmpeg on PATH is optional but recommended (fast export + upload remuxing). AI background removal fetches its model from a CDN on first use.

Drop media into the window (or ./media/), drag clips onto the timeline, edit, export.

Driving it with an AI agent

Everything an agent needs is in CLAUDE.md — the complete schema, semantics and recipes. Point any capable model at that file and it can operate the editor end to end.

Three equivalent control surfaces:

1. MCP (best for Claude Code / Claude Desktop) — register the bundled zero-dependency MCP server once:

   claude mcp add -s user fablecut -- node "<path-to>/fablecut/mcp-server.js"
   

Tools: fablecut_status (auto-starts the editor), fablecut_docs, fablecut_get_project, fablecut_set_project, fablecut_patch_project, fablecut_import_media, fablecut_analyze_reference.

The surface is token-efficient by design : agents patch the timeline with small ops (fablecut_patch_project) instead of round-tripping the whole document, read a compact one-line-per-clip summary (fablecut_get_project {compact:true}), and fetch only the manual sections they need (fablecut_docs {section:"props"}).

2. The file — read project.json, modify, bump revision, write. The UI live-reloads.

3. REST — GET/PUT /api/project, POST /api/upload, GET /api/library, SSE at /api/events. See CLAUDE.md for the full list.

Example: ask Claude Code "cut these six clips to the beat markers, add a teal-orange grade, put a word-pop caption on top and a whoosh on every cut" — and watch the timeline rebuild itself.

Or hand it a reference: "here's a reel I like — analyze it and remake it with my clips, same music". The agent calls fablecut_analyze_reference, gets the blueprint (cuts, beats, BPM, energy, drop, extracted music), and rebuilds the structure shot-for-shot with your footage.

Conflict-safe concurrent editing : the UI, the MCP tools, and direct project.json writes all agree on a revision counter. If you edit a clip in the UI while an agent is mid-task, the agent's next write is rejected (409 from the REST API / a conflict error from fablecut_set_project) instead of silently overwriting your change. The UI similarly detects when an agent write supersedes a not-yet-saved local tweak and tells you with a toast instead of dropping it silently.

server.js        zero-dependency HTTP server: static hosting, REST API, SSE,
                 ffmpeg export pipeline
app.js           the editor: timeline UI, compositor, keyframes, text engine,
                 SVG rasterizer, chroma key, exporters
index.html       single-page UI
style.css        dark editor theme
mcp-server.js    stdio MCP server exposing the editor to AI agents
analyze.js       reference-video analyzer: shots, beats/BPM, energy, drop,
                 music extraction (module + CLI)
CLAUDE.md        the agent manual (schema + recipes) — also served by fablecut_docs
project.json     your timeline (created on first run; gitignored)
media/           project footage (gitignored)
analysis/        cached edit blueprints from /api/analyze (gitignored)
library/         default assets: elements/ sfx/ svg/ fonts/
exports/         finished renders (gitignored)

Authoring animated SVG overlays

SVGs animate with plain CSS @keyframes. One convention: never hardcode animation-delay — set --d: 0.4s instead, and the compositor drives time by pausing all animations and rebasing their delays. Full rules + a skeleton in CLAUDE.md; working examples in library/svg/.

• The repo ships with 20 Google Fonts (library/fonts/, OFL — see LICENSES.md there) and a set of self-authored SVG overlays and animated elements (library/elements/, library/svg/, MIT like the rest of the repo).
• library/sfx/ is yours to fill (gitignored): sound-effect sites typically don't allow redistributing their files in a public repo, so FableCut doesn't — library/sfx/README.md lists good free sources.
• Export runs in the browser because the compositor is the browser; agents ask you to click Export (or render directly with ffmpeg from media/).

MIT