Geometry Math Proof Remotion

Geometry Math Proof Remotion (精准几何证明视频)

把数学证明文档(markdown)变成深底精准几何风格的 Remotion 视频。几何全部代码绘制(SVG + stroke-dash 描边),公式逐行揭示,字幕驱动时间轴。

规范样板:<VIDEO_WORKSPACE>/pythagorean-garfield-proof/ 是首集成品工程。遇到拿不准的版式/节奏/坐标问题,先看它的 src/GarfieldProof.tsx,不要凭空发挥。

新一集工作流

1. 读源文档。把证明拆成 6~10 个章节,每个章节一个视觉主意:

   • 钩子:抛出要证的命题,大字公式 + 悬念副标题
   • 准备:介绍构造(三角形/线段/多边形),引入变量 a/b/c…
   • 推导 1~N:每章只证一件事(局部面积、整体面积、某次代数化简…)
   • 消项/合成:把局部结果拼成最终等式
   • 收尾:boxed 结论 + 历史/人物/扩展署名

2. 列证明检查表。先把源文档里的关键步骤列成 beat checklist:

   • 每个变量定义(a 是什么、b 是什么)
   • 每个几何构造(哪几个点拼成哪个三角形)
   • 每个面积/角度计算
   • 关键代数步骤(展开、消项、平方)
   • 最终结论 + 历史署名 后续写 LINES 时用这张表防止把证明压成"口播三句话完事"。

3. 写 LINES,跑 TTS。打开 scripts/generate_tts.py,把 LINES 替换成本证明的章节台词。每行 {"id", "chapter", "text"}。运行:

   python scripts/generate_tts.py
   

   产出 public/assets/audio/voice.mp3、work/captions/captions_aligned.json、work/captions/captions.srt。

4. 回写 F 时间轴。从 captions_aligned.json 的 lines 拿每章末帧,写到 src/geometry.tsx 的 F 对象。同步把 Root.tsx 的 durationInFrames 改成 total_frames。不要停留在无配音估时版本。

5. 脚手架:

   mkdir "<VIDEO_WORKSPACE>/<new-proof>"
   cp -R "./.claude/skills/geometry-math-proof-remotion/templates/remotion-project/" \
         "<VIDEO_WORKSPACE>/<new-proof>/"
   cd "<VIDEO_WORKSPACE>/<new-proof>" && npm install
   

   ⚠️ 用原生 npm install,不要 rtk npm install(rtk 会翻译成 npm run install 报错)。

6. 改 Proof.tsx:

   • 几何坐标:根据本证明的图形定义关键点 const A = pt(0,0), B = pt(3,0)…
   • CAPTIONS:从 captions_aligned.json 的每行 text 拆出关键词(标 tone: 'accent'),其他作为普通文字
   • STEPS:FormulaStep 列表,from 帧对齐到对应章节的中段
   • HookOverlay / EndingOverlay 的 title/result 用大字公式,attribution 写历史/人物 不要改 geometry.tsx/formula-panel.tsx/caption-strip.tsx/hooks-overlay.tsx(风格锁定文件)。如需新组件,在新文件里加,不要改通用文件。

7. 验证循环(必须做):

   • npx tsc --noEmit
   • 渲接近每章结尾的静帧逐一检查:

     npx remotion still src/index.ts Proof --frame=<章末帧-30> out/check-N.png
     

     读图检查:文字溢出 SVG 框、几何元素重叠遮挡、字幕压住关键标签、公式行列错位
   • 关键词同步抽查:每条 LINES 的关键词(accent 部分),渲染"出现前 0.5s"和"出现后 0.5s"两帧;前帧不能露出,后帧只能露出已说到的词
   • npm run render:preview 出 renders/preview-low.mp4(scale=0.5),用户确认后再 npm run render 出 renders/final-1080p.mp4

证明忠实度

• 源文档是证明,不是提纲。改成视频可以合并相近句子,但不能跳步导致推导链条断裂。
• 保留"承接步骤"。例如:不能直接抛"面积是 c²/2",必须先有"两腰都是 c"做承接。
• 旁白可以精简,但必须保留推导的因果推进:构造 → 局部 → 整体 → 消项 → 结论。
• 若必须删减,先列出将删掉的 beat,确认它不是后文所需的逻辑桥。
• TTS 前对照 beat checklist 逐条检查,确认没漏关键定义/构造/消项步骤。

风格 DNA(不可变)

章节版式约定

• 钩子(H):全屏遮罩,黄色大字公式(140px)+ 中文悬念副标题 + 灰色英文署名(年代/作者)。HookOverlay 组件,在第二章节开始前 18 帧淡出。
• 准备(P):TopBar 显示章节名,SVG 画板开始绘制基础几何元素(三角形/线段),变量标签 a/b/c 在元素描边完成后 30 帧淡入。
• 推导章节(每章一个主意):每章只聚焦一个几何元素或一组代数变换;其他元素用 opacity 0.45 暗化;新元素描边 → 填充 → 标签 → 公式同步出现。
• 消项/合成(E):右侧公式面板连续推 35 步;每步间隔 3050 帧;最终结论用 tone:'result' 黄框大字。
• 收尾(F):EndingOverlay 全屏遮罩,Q.E.D. 字样 + 黄框公式 + 历史/人物署名(年代、作者、出处)。

关键帧节奏

• 一个元素出现 = 描边 36 帧 + 填充淡入 30 帧 + 标签淡入 24 帧
• 一个公式步骤淡入 24 帧
• 字幕条 6 帧淡入/淡出
• HookOverlay/EndingOverlay 30 帧淡入/淡出
• 章节末 30 帧不要再上新元素

多音色扩展

默认单旁白。如需多音色(对话式证明),参考 sketch-story-remotion 的多音色流程,但保留本 skill 的视觉 DNA。voice_id 映射见 sketch-story。

常见坑

• JSX 中 ² ₁₂₃ 触发 TS1351。Unicode No 类字符被 TS 解析为数字字面量后接标识符,在 JSX 文本位置报错。所有数学文本一律包字符串表达式:<span>{'a² + b²'}</span>,不要写裸文本 <span>a² + b²</span>。详见 references/jsx-unicode-pitfalls.md。
• Edit 工具找不到含 ² 的字符串。Edit 工具对 Unicode No 字符匹配不稳定。改用 Python 一次性 str.replace 或重写整个文件。
• Remotion 在中国卡 storage.googleapis.com。remotion.config.ts 必须设 Config.setBrowserExecutable(系统 Chrome)。Edge 不行(旧 headless flag 已移除)。
• 字幕驱动 frames。先跑 TTS 拿真实时长再回写 F,不要凭口播长度猜帧数。
• preview-low → final-1080p 两段式。先 scale=0.5 给用户确认,再 scale=1 出成片,防返工。
• rtk npm install 失败。用原生 npm install。
• 静帧分析时图像 MCP 可能拒绝。用肉眼检查或本地 image viewer,不要依赖 analyze_image。

参考文档

• references/composition-patterns.md — SVG 描边、坐标变换、FormulaPanel 逐步揭示、CAPTIONS accent 拆词的详细模式
• references/jsx-unicode-pitfalls.md — ²/下标的 TS1351 坑、Edit 工具失败、Python 替代方案的完整说明
• 规范样板 <VIDEO_WORKSPACE>/pythagorean-garfield-proof/src/GarfieldProof.tsx — 631 行完整实战例子