内容
# FABLEMOTION
**用一句话描述一个视频。观看它被拍摄。**
FABLEMOTION 将纯语言转化为发布级别的动态图形——那种随产品公告一起发布的图形。你编写一个场景规范（JSON），[Remotion](https://remotion.dev) 在浏览器中实时拍摄，一键渲染 MP4。外观经过模型公告样式训练：温暖的纸张，超大 serif 字体，春季文字揭示，英雄统计数据。色彩丰富——从不使用黑暗 AI 陈词滥调。
无需账户。无需 API 密钥。它完全在你的机器上运行。
```sh
git clone https://github.com/Subha-jit007/fablemotion
cd fablemotion
npm install
npm run dev # → http://localhost:3711
```
- **`/`** — 首页；英雄是 `videos/fable-is-back.json` 的实时渲染
- **`/studio`** — 预览任意视频，编辑其 JSON，渲染 MP4，与导演聊天
需要 **Node 18+**。首次渲染下载无头 Chrome（一次性，几分钟）。
---
## 三种编辑视频的方式
### 1. 手动 — 无 AI，无密钥
规格 *就是* 视频。打开 `/studio`，点击 **JSON**，并编辑 — 预览在您输入时更新。或者直接编辑 `videos/*.json` 中的任何文件。整个语法有九种场景类型（如下）；您可以不触及代理的情况下制作一部完整的电影。这是基础：它始终有效，适用于所有人。
### 2. 使用 Claude Code — 无密钥
您的 [Claude Code](https://claude.com/claude-code) 会话成为导演；其自身的智能组成规格，因此 Anthropic 密钥确实是可选的。在此文件夹中打开 Claude Code 会自动注册捆绑的 `.mcp.json`。从其他地方：
```sh
claude mcp add fablemotion -- node mcp/server.mjs
```
然后直接询问 — *"一个 20 秒的咖啡应用启动视频，活泼有趣，以应用名称结尾。"* 会话将 `get_style_guide` → 组成 → `save_video` → `render_video`。保持 `npm run dev` 运行，在 `/studio?video=<name>` 处观看预览。工具：`get_style_guide`、`list_videos`、`get_video`、`save_video`、`render_video`。
**更喜欢浏览器但没有密钥？** 运行本地桥接，工作室链接到它：
```sh
node bridge.mjs # → localhost:3799, 由您的 Claude Code 登录提供支持
```
工作室的标题药丸变成绿色（*"Claude Code 已链接 · 无密钥"*），聊天框起作用 — 无需 API 密钥。（Windows：双击 `wake-fablemotion.bat`。）
### 3. 使用Anthropic API 密钥 — 可选
点击工作室标题中的 **密钥**，并粘贴 `sk-ant-…` 密钥（仅存储在您的浏览器中），或在 `.env.local` 中设置 `ANTHROPIC_API_KEY` 以获取共享的服务器端密钥。模型默认为 `claude-opus-4-8`；使用 `FABLEMOTION_MODEL` 覆盖。
---
## 场景语法
每个视频都是 `{ title, format, fps, theme, backdrop, scenes[] }`。`format` 是 `landscape` | `portrait` | `square`；`theme.preset` 是 `paper` | `ink` | `candy`；`backdrop` 是 `drift` | `grain` | `none`。每个场景都有一个 `type` 和 `durationInFrames`：
| 类型 | 字段 | 用于 |
|---|---|---|
| `title` | `text`, `sub?` | 标题时刻（最后一字自动变为斜体） |
| `kinetic` | `words` (2–8) | 快速逐字钩子 |
| `statement` | `lines` (1–5), `accentLine?` | 行-by-行宣言 |
| `counter` | `value`, `label`, `prefix?`, `suffix?`, `decimals` | 一个英雄统计数据计数 |
| `list` | `title?`, `items` (2–6) | 编号阵容 |
| `code` | `title?`, `code` | 终端输入代码片段 |
| `chart` | `title?`, `data` (2–6 `{label,value}`) | 条形比较 |
| `compare` | `title?`, `left`, `right` (`{label,value}`) | 前后对比 |
| `logo` | `text`, `tagline?` | 结束标志 |
完整的规则 — 节奏，美学，示例 — 位于 **`agent/system-prompt.md`**。该文件是导演的训练；编辑它以更改风格。`spec/schema.mjs` 是组成、API 和 MCP 服务器共享的 Zod 真相源，因此在任何地方都能捕获错误的规格。
## 渲染
在工作室中点击一次，或从 CLI：
```sh
# 属性文件是 { "spec": { …a videos/*.json… } }
npx remotion render remotion/index.ts SpecVideo out.mp4 --props=props.json
```
`npm run remotion:studio` 打开 Remotion Studio 进行逐帧工作。渲染结果位于 `public/renders/`。
## 布局
```
spec/schema.mjs DSL（Zod）— 单一真相源
remotion/ 组成：9 种场景类型 × 3 种主题 × 3 种格式
agent/system-prompt.md 导演的训练（美学 + 节奏 + 规格合约）
app/ Next.js 工作室 + 首页（/，/studio）+ API 路由
mcp/server.mjs MCP 服务器 — 使 Claude Code 成为导演
bridge.mjs 本地无密钥桥接，用于浏览器工作室
videos/ 库（纯 JSON 规格）
```
MIT 许可。由 [Subha](https://github.com/Subha-jit007) 使用 web 而非模板制作。
