lroe/apple-dracula

技能：极简解说动画 — 德古拉暗色主题 (MinutePhysics / 思想启发风格)

生成符合极简手绘概念解说视频视觉与节奏风格的故事板、时间表、视觉剧本和制作提示。

---

1. 视觉身份与美学规则

• 画布： 德古拉夜色背景 (#282A36)，零渐变，零投影。
• 线条： 手绘墨迹风格（粉笔/单线，带有微妙的有机粗糙感），一致的笔画粗细 (3px–4px)，德古拉前景色 (#F8F8F2)。 手机安全底线： 在1080p分辨率下，任何图表笔画不得低于 3px；地面线使用 4px。
• 手机安全文字底线（单条16:9 YouTube母版）： 在1080p分辨率下，任何屏幕文字不得低于 36px。次要标签 36–44px，关键标签 48–56px，标题 72–80px。如果某个标签无法在 36px 下放置，请删减该标签或将该细节移至旁白中，而不是缩小字号。
• 调色板（德古拉）：
  • 基础色：德古拉背景色 (#282A36) + 前景色 (#F8F8F2)。
  • 表面色：德古拉当前行 (#44475A) 用于高亮/激活的卡片；使用 #313342 作为标准面板，#1E1F29 用于凹陷的凹槽/屏幕。
  • 功能强调色 A：德古拉红色 (#FF5555) — 损失、裁员、负余额、摩擦。
  • 功能强调色 B：德古拉绿色 (#50FA7B) — 收益、就业、替代、平衡。
  • 辅助强调色（谨慎使用）：粉色 (#FF79C6)、紫色 (#BD93F9)、青色 (#8BE9FD)、橙色 (#FFB86C)、黄色 (#F1FA8C)。
  • 中性填充：德古拉当前行 (#44475A) — 微妙的对象填充（桌子、建筑物）。
  • 深色填充：德古拉注释 (#6272A4) — 仅用于较大的填充形状，不得用于正文。
• 排版：
  • 字体风格：干净的手写无衬线体或休闲字体（例如 Caveat、Patrick Hand）。
  • 单词密度：每个标注最多 1–5 个单词。切勿将整个旁白逐字转录到屏幕上。
  • 放置位置：直接放置在关联视觉锚点的上方、下方或旁边。
  • 无低对比度文字： 次要标签、标注和字幕在深色背景上必须保持可读性：德古拉前景色 (#F8F8F2) 或薰衣草灰色 (#B8B9C5)。切勿使用德古拉注释 (#6272A4) 或褪色灰色作为文字；它们在投影仪上会消失。
  • 无左上角场景标题： 不要将旁白作为标题+副标题重复显示在内容场景的顶部。旁白负责承载句子；图表仅承载简短的功能性标签。这避免了“先看左上角，再看中心”的眼球乒乓效应。
  • 章节卡片是唯一的例外： 章节编号 + 单个主题图案可作为全屏过渡使用。保持其简洁，切勿添加段落。

---

2. 角色与隐喻设计

• 角色： 简单的棍子或豆子人物。面部最少化（点状眼睛，中性/微妙的嘴部曲线）。通过简单的道具（帽子、桌子、手机）进行区分。
• 概念隐喻：
  • 任务/工作：圆形集群，虚线轮廓淡入/淡出。
  • 宏观经济学：天平、二维折线图、点网格/阵列（例如 1000 个点）。
  • 机构：基本的几何建筑线条画，代表访问/空缺的门框。

---

3. 时间、同步与节奏规则

• 语音同步触发： 视觉元素应在该音节被说出的精确时间点绘制或弹出。
• 序列交错： 将复杂概念分解为离散的视觉组件，逐个引入（例如，任务 1 $\rightarrow$ 任务 2 $\rightarrow$ ATM 机械臂拉动任务 1）。
• “呼吸空间”规则（至关重要）：
  • 切勿在资产出现后立即进行转场。
  • 在该点旁白结束后，将完成的画面保持 1.5 到 3.0 秒 或更长时间（根据需要）。我们需要确保用户能够处理所有信息。
  • 观众需要时间阅读标注、理解关系、吸收见解，然后才能继续运动。
• 最小处理保持（硬性规则）：
  • 场景中最终视觉揭示的画面在转场前必须至少有 2.0 秒 的屏幕时间。如果旁白无法实现这一点，则在语境允许的情况下提前进行揭示，或将场景延长至下一个自然的停顿。
  • 切勿在完成图表的那同一个词上进行剪切。
  • 如果旁白的最后一句仅仅是过渡语（“让我们看看数据”、“这个适配器可以解决这个问题”），则将该部分话术移至下一个场景，而不是让它停留在屏幕上 0.1–0.8 秒。
  • 密集场景（多部分图表、数学、建筑）需要将 最终状态保持 2.5–3.5 秒。简化最后一个节拍，而不是匆忙剪切。
• 转场 = 通过德古拉背景的短暂淡入淡出（硬性规则）：
  • 使用 4–6 帧 的淡入淡出至 #282A36，以 30 fps 渲染（0.13–0.2 秒）。不要使用从左到右的擦除；这会使剪切感觉机械化。
  • 预演下一个场景的第一个视觉元素，使黑暗间隙只持续一眨眼，而不是一个空白场景。切勿暴露空画布超过约 0.2 秒。
  • 如果场景确实需要章节卡片，请保持一个图案在屏幕上，这样卡片就永远不会是一个空白的文本幻灯片。
  • 使用 场景开始 + 0.4 秒 的静态画面进行验证。如果画面超过约 80% 为空，则将第一个视觉元素提前。

---

4. 构图与负空间

• 负空间： 始终保持画布的 60%–80% 为空。
• 地平面/基线： 将人物和建筑物锚定到一条不间断的底部水平引导线上。
• 焦点孤立： 每个节拍保持 1 个活跃焦点区域（左、中或右）。不要同时动画化多个不相关的象限。
• 转场： 通过德古拉背景 #282A36 的短暂淡入淡出（4–6 帧）、沿地平面的横向平移，或突然变暗。没有从左到右的擦除、闪光的缩放或旋转。
• 保持字体大

---

5. 故事板生成工作流程

给定叙述脚本或概念主题时：

1. 任务级分解： 将叙述分割成 3–7 秒的视觉节拍。
2. 视觉隐喻映射： 为抽象的经济/技术主张分配具体、极简的隐喻。
3. 屏幕文字选择： 每个节拍选择 $\le 3$ 个锚定单词用于屏幕强调。
4. 时间与保持分配： 标记精确的同步点 ([SYNC]) 和暂停/保持持续时间 ([HOLD: Xs])。

---

6. 输出模板

对于每个视频场景，按如下格式输出：

### 场景 [编号]: [场景标题]
**音频时间戳：** [MM:SS - MM:SS]
**旁白：** "[精确转录片段]"

* **视觉描述：** (1-2 句话描述视觉布局和元素)
* **屏幕文字：** "[精确文字]" | 位置：[例如 顶部居中] | 颜色：[例如 德古拉红色]
* **动画序列：**
  1. `[00:00.0 - 单词]` 在基线绘制 [元素 A]。
  2. `[00:02.0 - 单词]` 将 [元素 B] 淡入/滑入 [元素 A]。
  3. `[00:03.5 - 单词]` 标签小弹跳弹出。
* **动画后保持：** [X.X 秒] (静态画面保持以确保在转场前理解)
* **转场出口：** [剪切 / 地平面左平移 / 淡入至黑暗]

1. 线条与隐喻引擎：Rough.js

• 原因： 如果您想要 MinutePhysics 那样的有机手绘感觉，就不能依赖静态 SVG。Rough.js 是一个轻量级的画布/SVG 库，它接收几何形状、线条和路径，并以可调节的“粗糙度”、“弯曲度”和草图般的笔触进行渲染。

• LLM 友好度： 非常高。LLM 无需复杂的样条坐标，只需简单调用：

  rc.line(x1, y1, x2, y2, { roughness: 1.5, stroke: '#F8F8F2', strokeWidth: 3 });
  rc.circle(x, y, diameter, { fill: '#50FA7B', fillWeight: 3, roughness: 1.2 });
  

2. 动画与时间运行时：Remotion (React + TypeScript)

• 原因：
  • 与可能丢帧的传统 CSS/浏览器动画不同，Remotion 逐帧渲染（fps = 30 或 60）。
  • 拥有内置钩子，如 interpolate() 和 spring()，用于弹出和线性写入。
  • 通过 useCurrentFrame() 原生处理音频时序。
• 实现“绘制”效果： 对于 SVG 线条描边，LLM 将 strokeDashoffset 从路径总长度动画化为 0。

3. 排版：Google Fonts (Caveat 或 Patrick Hand)

• 通过 @remotion/google-fonts 或本地 @font-face 直接嵌入字体。
• 严格设置样式为 #F8F8F2，每个标注最多 1–5 个单词。

4. 音频同步管道（上游）：OpenAI Whisper (单词级时间戳)

• 在 LLM 动画化之前，原始旁白被转录为包含单词级 JSON 时间戳（例如，通过 Whisper 的 timestamp_granularities=["word"]）。
• LLM 接收带有时间戳的转录，并将其转换为帧编号：

  目标帧 = 时间戳 (秒) × FPS