前言¶

给数学证明做视频，常见做法是录屏 PPT 或者手工在 AE 里摆关键帧。前者图形是位图、缩放就糊；后者每改一句口播就要重调时间轴，几何图形和公式很难跟口播严格对齐。

geometry-math-proof-remotion 把这件事固化成一条流水线：几何图形全部用 SVG 代码绘制，公式按口播节奏逐行淡入，字幕用真实 TTS 时长回写帧号。视频输出是 1920×1080 @ 30fps 的 Remotion 工程。风格对标 3Blue1Brown 和可汗学院。

下面介绍这个 skill 的定位、安装方式和完整制作流程。

这是什么¶

geometry-math-proof-remotion 是一个基于 SKILL.md 格式的 Agent Skill，由 liangdabiao 维护，仓库地址 https://github.com/liangdabiao/geometry-math-proof-remotion 。它解决的问题是：把一份数学证明文档（勾股定理、欧拉公式、积分、几何推导、代数恒等式、算法可视化）转成风格统一、帧级可控的讲解视频。

SkillHub 上该 skill 的分类是 design-media。

核心特性¶

以下能力均来自仓库 README。

• 深底高饱和配色：背景 #0d0d12，红/蓝/绿/黄四主色精确控场。
• 代码绘几何：所有图形用 SVG + stroke-dasharray 描边动画，不使用位图、图标库、emoji。
• 公式逐步揭示：右侧面板按口播节奏逐行淡入，关键变量黄色高亮，最终结论黄框大字。
• 字幕驱动时间轴：TTS 真实时长回写 F 帧，避免”口播三句话完事”式的时间轴错位。
• 章节聚焦暗化：当前章元素 1.0 透明度，其他章节 0.45 暗化。
• 收尾署名：Q.E.D. + 历史人物/年代卡片。

环境准备¶

制作前需要装好以下工具，版本要求来自 README。

关于 Chrome：Remotion 在中国大陆默认会卡在 storage.googleapis.com 下载 Chrome Headless Shell，README 给出的解法是改用系统 Chrome（Windows 默认 C:\Program Files\Google\Chrome\Application\chrome.exe）。Edge 不可用，因为 Remotion 用了旧 headless flag，而 Edge 已移除该 flag。

安装与启用¶

在 Codex、Claude Code、WorkBuddy 等 Agent 里用自然语言触发安装：

安装 skill: https://github.com/liangdabiao/geometry-math-proof-remotion

装完需要本地已安装 Remotion。安装好之后即可使用：

geometry-math-proof-remotion skill 制作视频：证明勾股定理

仓库内提供了 Remotion 4.0 模板工程，从模板新建一集：

mkdir "<VIDEO_WORKSPACE>/<new-proof-name>"
cp -R "./templates/remotion-project/"* "<VIDEO_WORKSPACE>/<new-proof-name>/"
cd "<VIDEO_WORKSPACE>/<new-proof-name>"

# 用原生 npm install，不要 rtk npm install（rtk 会翻译成 npm run install 报错）
npm install

cp .env.example .env
# 编辑 .env，按需填入 MiniMax API Key

制作一集视频的流程¶

README 给出的完整流程分七步，下面是逐条展开。

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

2、列 beat checklist，覆盖变量定义、几何构造、面积计算、代数化简，防止跳步。

3、写稿子。work/source/script.md 按”钩子 → 准备 → 推导 1~N → 消项 → 收尾”组织，每章先列 checklist，再写 LINES。

4、跑 TTS 并生成时间轴：

# 默认自动选择：有 minimaxi=xxx 配则用 MiniMax，否则用 edge
python scripts/generate_tts.py

# 强制指定 provider
python scripts/generate_tts.py --provider edge
python scripts/generate_tts.py --provider minimax

# 列出 edge 可用的中文 voice
python scripts/generate_tts.py --list-voices

产出三个文件：public/assets/audio/voice.mp3 是整段配音，work/captions/captions_aligned.json 是 Remotion 时间轴来源（总帧数 + 每行 start/end），work/captions/captions.srt 是标准 SRT 字幕。

TTS provider 的取舍：edge 免费、基于微软神经网络、需联网，适合快速出片和测试稿；minimax 基于 speech-2.8-hd，音色 moss_audio_2ecaeaac-5e5a-11f1-99fb-96e792fde6a1，需在 .env 配 minimaxi=<your-key>，适合成片。自动 fallback 规则是：命令行 --provider > .env 中 TTS_PROVIDER > 有 minimaxi=xxx 则用 minimax > 默认 edge。

5、回写时间轴。把 captions_aligned.json 的 total_frames 写到 src/Root.tsx 的 durationInFrames，把每行末帧写到 src/geometry.tsx 的 F 对象。

6、改 src/Proof.tsx：

• 几何坐标用 pt() 写，例如 const A = pt(0,0), B = pt(3,0)…
• CAPTIONS 从 captions_aligned.json 拆关键词，标 tone: 'accent'
• STEPS 是 FormulaStep[]，from 锚到对应章节中段
• HookOverlay / EndingOverlay 的 title/result 用大字公式，attribution 写历史人物和年代

7、验证和渲染：

# TS 类型检查
npx tsc --noEmit

# 启动 Studio 实时预览，浏览器访问 http://localhost:3000
npm run studio

# 先出低分辨率预览版给用户确认
npm run render:preview
# → renders/preview-low.mp4

# 确认后再出 1080p 成片
npm run render
# → renders/final-1080p.mp4

适用场景与注意¶

适合的场景：数学证明讲解视频、几何推导动画、代数恒等式演示、算法可视化，尤其是需要”图形精确、公式逐步出现、口播和画面严格对齐”的场合。仓库附带一个勾股定理的示例成片：https://www.bilibili.com/video/BV1jgKH6qEu5/ 。

需要注意的几点：

• 模板工程是骨架，不是成品。templates/remotion-project/ 里的 Proof.tsx 当前是占位实现（单位三角形示例、单条示例字幕），实际每一集都要重写几何坐标、CAPTIONS、STEPS 和 TopBar 信息。
• src/geometry.tsx、formula-panel.tsx、caption-strip.tsx、hooks-overlay.tsx、top-bar.tsx 是风格锁定文件，不要改。需要新组件就在新文件里加。
• TTS 两个 provider 都要联网。edge 免费但依赖微软在线服务，minimax 需要自备 API Key。
• Remotion 渲染必须用 Chrome，Edge 不可用；国内网络环境下需要手动指向系统 Chrome。
• 安装依赖时用原生 npm install，不要用 rtk npm install。

结尾¶

这个 skill 的价值在于把”数学证明视频”里最容易出错的三件事——几何图形精度、公式出现节奏、口播与时间轴对齐——全部交给代码和 TTS 时长来确定，而不是靠手工对帧。对需要批量产出同风格数学讲解视频的开发者和内容作者来说，可以省下大量重复劳动。

官方地址：https://api.skillhub.cn/user_8bb4b4f5/geometry-math-proof-remotion
仓库地址：https://github.com/liangdabiao/geometry-math-proof-remotion