返回 html-video
2026-06-06-spec-09-multi-engine-ux.md
根目录 / research / 2026-06-06-spec-09-multi-engine-ux.md
1 # RFC-09：多引擎的产品价值与体验设计
2
3 > **Status**: Draft v0.2（产品/体验层 spec，供 studio UI、agent 编排、launch 文案统一口径）
4 > **Date**: 2026-06-06；**v0.2 定位修正 2026-06-07**
5 > **Scope**: 回答"hyperframes 和 Remotion 怎么结合""结合的价值是什么""用户怎么用到"——从用户视角定义多引擎体验。
6 > **关系**: RFC-08 定义 Remotion adapter 的**技术**接法；本 RFC 定义多引擎对**用户**意味着什么、studio 里长什么样。两者互补。
7 > **来源**: 2026-06-06 与 Joey 的设计讨论（段落混用 / 默认 hyperframes / 数据帧推荐对比）。
8 > **v0.2 修正**: Joey 2026-06-07 拍板——**Remotion 是用户主动挂的"动效增强插件"，不是 AI 背着用户偷偷换的引擎**。Hyperframes 是基座（所有帧默认走它），Remotion 更像锦上添花的增强。下面所有"AI 自动选引擎 / 引擎名对用户隐形"的旧表述据此降级为"AI 建议 + 用户主动开关"。
9
10 ---
11
12 ## 0. 一句话定位（v0.2）
13
14 > **做视频不该在"好看"和"准确"之间二选一。html-video 以 hyperframes 为基座快速出片；遇到数据画面，你可以主动给这一帧挂上 Remotion 增强，让数字真的滚起来、柱子按真数据长出来——拼成你要的那一条。**
15
16 **定位铁律（v0.2）**：
17 - **Hyperframes 是基座**——所有帧默认走它，免费、零配置、所见即所得。
18 - **Remotion 是用户主动挂的增强插件**——不是 AI 背着用户换引擎。用户**明确知道**自己在"给这一帧开增强"，开不开的手始终在用户。
19 - **AI 退到"建议"**——它可以在数据帧上提示"这段开增强数字会动起来"，但**不替用户决定**，更不静默切换。
20 - 引擎名可以对用户露出（"用 Remotion 增强这一帧"），因为这是用户主动选的动作，不再是需要隐藏的内部细节。
21
22 ---
23
24 ## 1. 用户视角：两类需求，今天的工具逼人二选一
25
26 | | 第一类：做"好看"的视频 | 第二类：做"准确"的视频 |
27 |---|---|---|
28 | 场景 | 营销短片、产品发布、logo 动画、社交片头 | 数据报告、增长曲线、KPI 周报、批量出片 |
29 | 用户要什么 | **炫、快、所见即所得**，动画越花哨越好 | **数字对、每次一样、能自动批量** |
30 | 谁服务他 | hyperframes 路线（浏览器真跑录屏，预览即出片） | Remotion 路线（数据驱动动画、逐帧精确、可云端批量） |
31
32 **今天市面工具的痛点**：用 hyperframes 类做不了精确数据动画；用 Remotion 类又得会写 React、做不了白嫖的炫动画。**用户被逼二选一。**
33
34 **html-video 的价值 = 用户不用选。** 下面三条价值依次展开。
35
36 ---
37
38 ## 2. 技术框架：拆掉"二选一"的错觉（两轴模型）
39
40 > 这一节是内部理解，不直接对用户讲。但它是所有结合方案的地基。
41
42 把纠缠的两件事拆成两个独立的轴：
43
44 **轴 1 — Authoring（用户/agent 写什么）**：`HTML+CSS+GSAP`（现有 27 模板） / `React-tsx`（Remotion 原生）
45
46 **轴 2 — Capture（像素怎么变视频）**：
47 - **实时录屏**：浏览器真跑、录下来（现 hyperframes/playwright）。动画白嫖，但**非确定性**（机器卡了丢帧、时长抖动）
48 - **确定性 seek**：时钟冻在第 N 帧 → 把动画 seek 到 N → 截图 → 前进。**确定性**，但动画要靠 seek 驱动
49
50 两个 adapter 各占一格，中间两格是机会：
51
52 | | 实时录屏 | 确定性 seek |
53 |---|---|---|
54 | **HTML+GSAP** | ✅ hyperframes（现状） | ⬅ RFC-08 §3.2 桥接在这（HTML 白嫖 + 确定性） |
55 | **React-tsx** | （没价值的角） | ✅ Remotion 原生（数据动画的家） |
56
57 **关键洞察**：RFC-08 的"桥接"不是第三种引擎，它是 `HTML authoring × 确定性 capture`——已经是一种结合体。但真正服务用户价值的结合，发生在**编排层**（§3），不是渲染器内部。
58
59 ---
60
61 ## 3. 价值一：一条视频里"该炫的炫，该准的准"（段落级引擎混用）
62
63 ### 用户故事
64
65 用户做一条"本周增长复盘"视频：
66 - **开头**：炫酷品牌片头（hyperframes 实时录屏，白嫖 GSAP 动画）
67 - **中间**：真实 star 增长曲线，数字一个个跳上去、柱子按真数据涨（Remotion 原生数据动画）
68 - **结尾**：品牌收尾（hyperframes）
69
70 → ffmpeg 拼成**一条连贯 MP4**。用户**完全不知道**中间换了引擎，只觉得"又能做炫片头、又能做准数据，还拼成了一条"。**竞品做不到这个组合。**
71
72 ### 能不能做？✅ 能，架构已支持
73
74 - content-graph（RFC-06）本来就是"每节点出一帧 → ffmpeg concat 拼成片"，`exportMp4` 多帧路径已在走 concat。
75 - 今天所有节点喂同一个引擎。**改动 = 把"用哪个引擎"从项目级提升为节点级属性**，不同段走不同 adapter。
76 - 输出层天然兼容：两个引擎最后都吐标准 MP4 帧，ffmpeg 不在乎是谁渲的。
77 - **v0.2 强调**：这里"片头炫 / 数据准"的分配**不是 AI 背着用户自动切**，而是 **基座 = hyperframes，用户在数据帧上主动开 Remotion 增强**。混流是结果，主动权在用户、AI 只建议。
78
79 ```
80 片头帧 (hyperframes 基座) ┐
81 数据帧 (用户主动开 → remotion 增强) ├─→ ffmpeg concat ─→ 一条 MP4
82 片尾帧 (hyperframes 基座) ┘
83 ```
84
85 > **2026-06-07 已落地（Phase A+B）**：这套混流已在 CLI 层跑通——`FrameRecord.engine`/`nativeTemplateId`/`data` + `orchestrator.enhanceFrameNative()` + `exportMp4` 按帧解析 + 混流重编码 concat。一条 8s MP4 里数据帧是原生 Remotion（柱子按真数据生长 + 数字滚动）、邻帧是 hyperframes，全解码无错、时长精确。首个原生模板 = `templates/frame-data-rollup`。studio 开关 UX 待下一轮。
86
87 ### 不能做什么？❌ 同一画面叠加两个引擎
88
89 "Remotion 数据图叠在 hyperframes 动画背景上、同一画面合成"——**不做**。两引擎各跑各的浏览器、各有时钟和坐标系，像素级实时合成等于自写合成器，复杂度爆炸。真有这需求 → 在**单个引擎内部**做图层叠加。
90
91 > **一句话**：拼接式结合（段与段）能做、架构已支持；叠加式结合（同一画面）不做、单引擎内部解决。
92
93 ---
94
95 ## 4. 价值二：用户成长路径上不用换工具
96
97 - **个人 / ≤3 人团队**：免费、本地跑、做炫视频，够用（默认 hyperframes，free-osi）。
98 - **团队大了 / 要每天自动出一百条数据视频**：同一个工具，后台切云端批量渲染（Remotion Lambda），不用推翻重学。
99 - license 由 agent 诚实提示：团队 ≥4 人用到 Remotion 商用路径时，提醒需授权（RFC-08 §6）。
100
101 **"省钱省心"——普通人听得懂的价值。** 工具陪用户从个人长到团队。
102
103 ---
104
105 ## 5. 价值三：默认 hyperframes + 数据帧推荐 Remotion + 并排对比
106
107 这是把多引擎落成**用户能控制的体验**的核心交互。
108
109 ### 体验流
110
111 1. **默认全程 hyperframes** —— 免费、零配置、人人能用。不让所有人一上来碰 Remotion license。
112 2. **AI 只在"值得"的帧上提示** —— agent 扫一遍视频，识别数据类帧（柱状图 / 增长曲线 / KPI 数字），标记：
113 > 💡 这一帧是数据展示，用 Remotion 渲数字会一个个精确跳动、更专业。要不要试试看效果？
114 3. **用户点一下，同一帧两个版本并排看** —— 左 hyperframes 版 / 右 Remotion 版，自己挑哪个留下。**AI 只推荐不强迫，用户始终掌控。**
115
116 ### ⚠️ 设计上的关键约束（否则功能是空的）
117
118 "并排对比"要有意义，**两边必须真的看起来不一样**：
119
120 - 若 Remotion 走**桥接**（渲同一份 HTML）→ 两边几乎一模一样 → 用户："这俩没区别啊？" → **功能白做**。
121 - 只有 Remotion 渲**原生数据动画**（数字 `interpolate` 从 0 滚到目标、柱子按真数据生长）→ 对比才有看头：左边"静态图表"，右边"数字活起来了"。
122
123 **结论**：本功能依赖 RFC-08 **Phase 2（原生 tsx 数据动画）**，不是 Phase 1（桥接）。用户的产品直觉恰好指向 Remotion 真正该用的地方——**数据帧**。
124
125 ### 对用户的一句话
126
127 > "默认帮你快速出片。遇到数据画面，AI 会提示'这段换种方式能让数字动起来，要对比看看吗？'——你看完两个版本，挑你喜欢的。"
128
129 ---
130
131 ## 6. AI 编排：用户说要什么，AI **建议**（v0.2 修正：不是替用户选）
132
133 用户说"帮我做个本周数据周报视频"，agent：
134 - 整片以 **hyperframes 基座**生成（默认、免费、零配置）。
135 - 在数据段**建议**："这几帧是数据，开 Remotion 增强数字会动起来、更专业，要开吗？"——用户点头才挂增强。
136 - 团队 ≥4 人用到 Remotion 商用路径 → 提示"这段商用需授权"。
137
138 依据 = adapter 的 `capabilities`（`licensing` / `renderTarget` / `bestFor`，RFC-01）。AI 用这些字段**判断该不该建议**，而**不是静默路由**。
139 - ❌ 旧 v0.1 的"整片自动选引擎 / 引擎名隐形"已废弃——那等于 AI 替用户决定，与 v0.2 定位冲突。
140 - ✅ 正确形态：基座固定 hyperframes，AI 在"值得"的帧上给一个可拒绝的增强建议，用户主动开。
141
142 ---
143
144 ## 7. 诚实的落地排序（北极星 vs 近期能做）
145
146 > 把"理想体验"和"现在能落地的"分清，避免为了"显得多引擎"硬塞。
147
148 **前提链条（§5 体验的依赖）**：
149 1. ~~先有第二个真引擎出真帧~~ ✅ **已落地**：Remotion adapter 桥接（RFC-08 Phase 1）+ 原生 tsx 数据模板（Phase 2，`frame-data-rollup`）。
150 2. ~~且得是原生数据动画版~~ ✅ **已落地**（2026-06-07，Phase A+B）：原生柱状图生长 + 数字滚动，CLI 跑通混流 MP4。
151 3. ⏳ **下一轮**：studio 加"数据帧上的增强开关 + （可选）并排对比" UI。
152
153 **近期能先做、不依赖 Remotion 的**：
154
155 | 步骤 | 做什么 | 依赖 | 价值 |
156 |---|---|---|---|
157 | **① 数据帧识别** | agent 标出哪些帧是 `data` 节点、值得特殊处理（content-graph 已有 entity/data/text 节点，RFC-06） | 无 | §5 体验的"识别"前半段先就位，UI 占位 |
158 | **② 段落级 engine 字段** | content-graph 节点加 `engine` 属性 + concat 混流（先用 hyperframes 两态占位：实时 / 确定性） | 无（RFC-08 §3.2 seek helper 抽进 core 即可给 hyperframes 加确定性模式） | §3 段落混用的骨架，纸面变可演示 |
159 | **③ Remotion 桥接** | 接 Remotion adapter | 想上 Lambda / 多轨音频时 | on-ramp 到 Remotion 基础设施 |
160 | **④ Remotion 原生 tsx** | 数据动画模板 | ③ 之后 | §5 对比功能真正成立、§3 数据段真正精确 |
161 | **⑤ studio 对比 UI** | 逐帧引擎推荐 + 并排对比 | ④ | §5 体验完整落地 |
162
163 **诚实提示**：若近期不上 Lambda、不做数据动画，Remotion 桥接（Phase 1）ROI 不高——更该先做 ① ②（段落混用 + hyperframes 确定性模式），用现有架构见效，不引入 Remotion license 包袱。Remotion 在你真需要它的基础设施（Lambda / 数据动画）时才进场。
164
165 ---
166
167 ## 8. 对外口径（launch / 介绍统一用）
168
169 - **主标语**：见 §0。
170 - **三句价值**（对应 §3/§4/§5，v0.2 口径）：
171 1. "以 hyperframes 为基座快速出片；遇到数据画面，主动给那一帧挂 Remotion 增强，让数字活起来——拼成一条。"
172 2. "从个人到团队，同一个工具陪你长大，不用换、不用重学。"
173 3. "AI 会建议哪段值得增强，但开不开由你——主动权始终在用户手里。"
174 - **纪律（v0.2）**：① 默认/基座永远是 free-osi 的 hyperframes，Remotion 是"用户主动挂的增强"，保护开源自由定位；② **不再讲"引擎名隐形"**——增强是用户主动动作，可以明说"用 Remotion 增强这一帧"，但避免把它讲成"AI 自动换引擎"；③ 不夸"叠加合成"，我们做的是"段落拼接"；④ Remotion 商用 license 由 AI 诚实提示，是相对"只会 Remotion 的工具"的优势。
175
175 lines MARKDOWN