Liqiuyue9597/数据视频技能

数据解说视频（Tatakye 风格）

构建一个自包含的 HTML 文件，用于生成字幕驱动的中文解说短视频，用户可在浏览器中播放并进行屏幕录制。

适用场景

• 将一篇文章、论文或研究发现转化为 3-6 分钟的短视频
• 黑金极简“思辨片”美学（继承 3Blue1Brown / Veritasium / Tatakye 风格）
• 成果希望发布到小红书 / 微信视频号 / Bilibili / YouTube
• 零外部资源——无需购买字体、免版权素材、无服务器依赖

在写任何代码之前

不可妥协的前置问题——务必用 AskUserQuestion 提出，而非事后询问。搞错意味着重写。

1. 一句话主题：不是“文章关于什么”，而是视频在捍卫的主张。如果无法用一句话说清，你还没有视频，只有一份阅读清单。
2. 主轴：什么屏幕对象将贯穿整个视频？（参见下文“主轴”部分——这是最重要的设计决策，也是大多数解说视频因完全忽略而出错的地方。）
3. 时长：3-4 分钟（精华版） vs 5-6 分钟（标准 Tatakye 长度） vs 8-10 分钟（深度版）。时长决定保留多少章节。一篇 10 节的文章若目标为 5 分钟，需删掉 60-70% 的章节。
4. 旁白模式：仅字幕（文本驱动节奏） vs AI 语音 over vs 自行录制。“仅字幕”为默认——字幕本身成为节拍。
5. 署名：如何注明原作者。“原文 · [名字]”放在右上角是干净的默认做法。如果有主轴，署名应放在主轴下方，而非取代其位置。
6. 收益（并非修辞性提问）：观众带走什么具体的东西？重新包装的问题不是收益。 “你，是吗？”听起来有力，但让观众无所带走。真正的收益是一个简短的命名列表（2-4 项），观众第二天还能复述。参见下文“收益，而非修辞”。

切勿跳过这些。 第一次尝试几乎总在#1（主题）和#5（落地）上失败。一旦这些确定后，你可以自由重写。

主轴——最重要的设计决策

一个优秀的解说视频有主轴：一个持久的屏幕对象，在视频大部分时间可见，每个节拍都点亮其不同部分。

Tatakye 的股市回报视频是典范。主轴上公式 p = E[mx] 固定在右上角，从 1:00 持续到 3:30。每个章节高亮一个符号——x，然后 m，然后 π_s——教授该符号的含义。最后，公式“解锁”为三个具体收获（x → “哪些未来”，m → “哪个世界”，π_s → “等多久”）。

为什么这有效，以及没有主轴的视频为何显得薄弱：

• 主轴是视觉锚点。如果观众移开视线后回来，他们立即知道“我们在分析什么”。
• 它将抽象框架转化为屏幕上的物理对象。想法有了坐标。
• 章节标签只能告诉观众他们在结构中的位置。主轴告诉观众想法的哪个组件正在被解释——这是一个更强的信号。
• 结尾的收益可以 literally 是“主轴，已解锁”。你以问题开场，逐步构建主轴的每一部分，最后将主轴作为答案交还给观众。

好的主轴的要素

主轴候选必须：

1. 一行内能容纳（以便始终固定在一角）
2. 包含 3-5 个命名组件，每个对应一个视频节拍
3. 视觉上稳定——不是动画，而是静态参考框架
4. 承载论点——如果你理解主轴的每个部分，你就理解了整部作品

常见形式（按冲击力排序）：

• 一个公式：工作 = 肌肉 × 心智、p = E[mx]、价值 = 稀缺性 × 关注度
• 带命名箭头的图表：生产者 → 产品 → 用户，节点可逐个高亮
• 带标签的比例或比较：过去 : 现在 : 未来
• 短序列：观察 → 假设 → 实验 → 结论

避免作为主轴：

• 单个数字（无可点亮的组件）
• 长句（太啰嗦，固定于一角违背目的）
• 图表（图表是 keystone 视觉，应位于中央，而非作为主轴）

主轴必须在第一幕结束前出现，并持续存在

不要在开始时将主轴丢给观众后就不再使用。也不要等到第二幕才引入。结构如下：

1. 0:00–0:30 钩子：尚未出现主轴；设置问题
2. ~0:30 主轴揭示：公式/图表淡入右上角
3. 第一至三幕：主轴持续，每幕点亮一个组件
4. 收益：主轴淡出并转变为三个收获的列表

主轴术语高亮（视觉方案）

每个主轴术语应有三种状态：

• 暗淡（默认）：color: var(--dim)——灰色，存在但微弱
• 点亮（正在解释）：color: var(--gold) + text-shadow 发光——明确表示“我们就在这里”
• 已完成（已解释过）：color: var(--fg)——白色，已被教授、已确定

新章节开始时，将上一个 .lit 降级为 .done，将新术语提升为 .lit。一次只有一个术语点亮。视觉效果：主轴从左到右逐步点亮，最后所有内容变为白色（完全教授完毕），准备淡入收益。

叙事结构——一个主张，少数节拍

唯一硬性规则：作品捍卫一个主张，每个节拍都为其服务。如果某个章节没有推动主张或为后续节拍做铺垫，则剪掉。

除此之外，结构是工具，非模板。选择适合主张的形状：

• 三幕（钩子 → 模式 → 转折 → 代价）——适用于主张有令人惊讶的逆转（如“我们以前做过，但这次有代价”）
• 问题 → 机制 → 含义——适用于解释某事为何以某种方式运作
• 时间线 / 逐步积累——适用于观点是积累（“看看这走了多远”）
• 比较——适用于“A vs B，以及为何重要”
• 问题 → 尝试 → 解决——适用于研究发现或调查性内容
• 单洞察展开——一个令人惊讶的事实，慢慢构建后落地（Tatakye 的股市回报视频正是如此）

如何选择：将一句话主张说出来。这个论证的自然节奏是什么？那就是你的结构。

章节数量按时长调整，而非结构决定：

• 3-4 分钟 → 3-4 个 keystone 节拍
• 5-6 分钟 → 5-7 个节拍
• 8-10 分钟 → 8-12 个节拍

每个节拍需要：

• 一个 keystone 视觉（曲线、比较、图表、粒子事件）
• 一个 keystone 数字或一个 keystone 短语
• 一个过渡，转向下一个节拍（不仅仅是“现在进入第二节”）

危险信号：如果大纲读起来像“第一节、第二节、第三节……”的平坦列表，你只是在引导用户浏览阅读清单。压缩或重新排序，使节拍链式连接——每个节拍让下一个显得不可避免。

场景经济——更少的场景，更长的演进

常见失败模式：让每个章节都成为一个新场景。结果：七个不相关的视觉依次呈现，每个持续 30 秒，观众感到眩晕且什么也记不住。

Tatakye 原则：一个视觉对象，在 2-3 分钟内演进。在股市回报视频中，“概率空间网格”从 ~0:40 到 ~2:30 在屏幕上——近两分钟。在此期间，它：

1. 以线条形式出现（“所有可能的世界”）
2. 增长金色条（x，每个世界中的收益）
3. 条变彩色（m，每个世界的权重）
4. 公式出现在上方（期望值）
5. 特定数字覆盖（具体示例：0.86, +16.9%）
6. 文字标签覆盖（“萧条 / 繁荣”）

六次迭代，一个视觉对象。 观众的目光从不重置。

经验法则

• 目标：5 分钟视频共 3-5 个场景。超过此数 = 切换过频。
• 实质性场景最短时长：60-90 秒。少于 1 分钟 = 可能应作为另一个场景的图层，而非独立场景。
• 优先使用场景演变为下一场景，而非切换。 示例：双曲线图长出两条曲线间的阴影区域，该区域长出条——三个“章节”的内容，零场景切换。
• 场景变化发生在幕边界，而非幕内。 幕内使用叠加、高亮、数字跳变、标签——而非场景切换。

何时场景切换是合理的

• 钩子 → 第一个内容场景
• 第 N 幕 → 第 N+1 幕，如果视觉隐喻 fundamentally 无法承载下一个想法
• 内容 → 收益（结尾值得视觉重置）

仅此而已。5 分钟视频最多三次场景切换。

收益，而非修辞

优秀的解说视频以一个具体的、命名的 2-4 项列表结尾，观众可带走。不是问题，不是感觉。一个列表。

Tatakye 的股市回报视频以三样东西结尾（x, m, π_s），配有具体解释：“买哪些未来，你在哪个世界，等多久。”观众当晚可在晚餐时复述。

常见反模式：

• “你，是吗？”/ “Are you them?” —— 重新包装的问题。感觉有力。教不了东西。观众关闭视频，记住氛围，忘记内容。
• “你觉得呢？” —— 修辞性推诿。视频未承诺任何东西。
• “唯有时间会证明。” —— 新闻式回避。相同问题。
• 一句安慰的话。“我们以前经历过。” —— 平淡，不可操作。

好的收益的感受：像解锁主轴。主轴是 A = B × C。收益是“因此重要的是：(1) B, (2) C, (3) 它们之间的互动。”视频 literally 解析为答案。

三项答案屏幕（方案）

     01            02            03
      X             Y             Z
    label         label         label
   caption       caption       caption

• 三个竖栏，等间距
• 项目逐个出现，间隔 ~1 秒（每项一声铃声）
• 每个项目：编号（01 / 02 / 03）、单字符徽章（一个汉字或数学符号）、短标签（2-4 字）、一句话说明
• 三个全部出现后保持 3-4 秒，然后过渡出去
• 然后一句收尾台词，可以是将钩子重新表述为已解决：“你，在哪一侧？”在说出侧面后再用即可。

章节标签作为内容路标

弱章节标签：第一幕, 第二幕, 第三幕 —— 告诉观众他们在结构中的位置。他们不关心。

强章节标签：肌肉 · 第一次外包, 心智 · 第二次外包, × · 相乘, = · 代价, 答案 · 三件事 —— 每个标签都是主轴中的一个术语或直接的内容片段。阅读标签，观众立即知道现在正在分解什么想法。

规则：章节标签应为主轴会高亮的一个词。如果“第二幕”是你的章节标签，但主轴是“心智”，则将章节标签改为“心智”。不要将结构脚手架复制到章节标签中——结构是隐式的，内容才是观众需要的。

视觉系统（Tatakye 风格）

颜色

--bg:    #0a0a0f   /* 不是 #000000 —— 纯黑在屏幕上显得死板 */
--fg:    #eceae4   /* 暖白，带 2% 蓝色偏；切勿纯白 */
--dim:   #8a8a90   /* 用于轴标签和说明 */
--gold:  #d4a85a   /* 唯一强调色 */
--red:   #c15b4e   /* 仅用于“负面”数据（工资滞后） */

切勿使用超过这 5 种颜色。克制添加蓝/绿以获得多样性的冲动。

排版——这是视频成败的关键

• 中文或英文，每个元素选其一。切勿使用“第二幕 · 并行 · ACT II · 现在轮到心智”——这冗余、难读，且暴露“AI 制作的双语幻灯片”。每个标签选择一种语言。
• 尽量减少斜体。斜体在 CJK 文字上在几乎所有浏览器中看起来都很差（伪斜体字形）。使用颜色（var(--gold)）而非斜体强调。
• 移动端最低字号：
  • 轴刻度：17px 基准（由 fontPx() 缩放）
  • 轴标签：17-19px
  • 曲线末端标签：19px
  • 章节标签（左上）：1.1rem
  • 字幕（底部居中）：1.15rem
  • 标题数字（居中）：4.5rem+
  • 大型开头/结尾文字：1.9rem+
• 显示数字用衬线体（EB Garamond 回退 → Noto Serif SC）。其他所有内容用无衬线体（Inter → PingFang / Noto Sans）。

四层信息架构（Tatakye 签名）

每个场景有最多四个文本层，固定在特定位置：

1. 左上：章节标签（小号、字母间距、暗淡）
2. 右上：作者署名（小号、暗淡）
3. 居中：大数字 / 标题（大号、衬线体）
4. 底部居中：字幕旁白（中号、无衬线体）
5. 左下斜体（可选）：学术引用（恩格斯停滞 · Robert Allen）

核心母题（全篇复用 3-5 个）

不要为每个章节创造一个新视觉——选择一小套并变化使用：

• 带透视的粒子场：120×36 网格，远行星近地平线，轻微正弦波
• 时间轴上的上升曲线：大部分时间平坦，指数级腾飞；将时间锚点标记为叙事词语（“现在”、“未来”）而非具体年份（2000 年已是过去）
• 带面积填充的下降曲线：价格崩溃 / 价值流失
• 水平时间条：比例长度比较（40 年 vs 5 年，1/8 比例）
• 代码雨：简短领域特定行下落，用于“机器接管认知工作”
• 点/粒子破碎：用于“某事断裂”时刻

镜头呼吸

为任何静态场景添加微视差：camBreath = sin(t*0.14)*6, camSway = sin(t*0.09)*4，应用深度加权乘数，使近景元素移动多于远景。防止“死画面”感。

场景过渡

场景间始终使用黑屏闪烁——绝不硬切。sceneBlink(cb, {dark:0.45, hold:0.08, light:0.5})：0.45 秒淡出为黑 → 执行场景切换 → 0.5 秒淡入。每次过渡约 1 秒。感觉像电影剪切，而非幻灯片切换。

数字跳变

每个大数字在揭示时从 0 动画到目标值，使用 easeOutCubic 曲线，持续约 1.1 秒。使用 <span class="count" data-to="..."> 结构。

结束画面模式

• 三项收益居中对齐
• 箭头/括号从收益指向一个总结性文字（可选但推荐）
• 最后 3 秒纯色背景+一行结束语：仍在屏幕上方
• 最终黑屏

音频设计

核心原则：少即是多

Tatakye 风格的关键音频洞察：观众应该能够关掉声音，仍然理解整个视频。 音频增强，而非承载内容。

• 无旋律。无循环背景音乐。音乐暗示时间流逝，而你需要观众停留在抽象时间中。
• 无节拍轨道。无鼓声、无固定节奏。只有单次声音纹理。

所需音频文件

自包含的音频：视频应该能够在不加载任何外部音频文件的情况下工作。音频通过 Web Audio API 合成，不依赖 <audio> 标签或外部 .mp3/.wav 文件。所有声音从头生成：

• 环境纹理：单个持续生成的无人机/脉冲声，0.005 音量，在一秒窗口内，正弦波频率 70-120Hz，带有微妙的随机颤音（LFO：0.5-1.0Hz，音量 0.03-0.06）。这产生几乎不可闻的嗡嗡声背景。
• 脉冲节奏：无人机之上，每隔 3-4 秒添加一个极短的攻击/衰减脉冲（包络：0s attack, 0.15s decay, 0.0 sustain, 0.3s release，正弦波 500Hz，音量 0.004）。这产生一声“呼吸”，标记时间流逝。施加通过 LFO 的随机跳过（每 4-6 个脉冲按 0.3 概率跳过）。
• 揭示声：用于节拍关键数字/想法出现时——两个快速音符：（200Hz，音量 0.04，持续时间 0.3s）几乎立即后跟（400Hz，音量 0.025，持续时间 0.5s）。重叠 50%。
• 项铃声：用于收益屏幕项目逐个出现时：纯正弦 800Hz，音量 0.04，指数衰减 1.2s。不可同时触发。

无自定义音频文件

不应有对 new Audio('path/to/file.mp3') 或 <source> 的引用。每个视频的 HTML 生成自己的声音。

关于交互性——你不需要

这是录制的视频。不允许有单击、悬停状态、交互式滚动视图、控制台输入或动态模式切换。始终保持回放模式。

代码结构与助手注意事项

助手应在单个 HTML 响应中输出完整的独立文件。

尺寸语法

• 所有 UI 元素标注尺寸使用 fontPx() 函数，而非固定 px。
• fontPx(17) → 返回窗口高度

---

原始简体中文，Tatakye 风格解说视频，用于 Xiaohongshu / WeChat Video / Bilibili / YouTube。