前言¶

給數學證明做視頻，常見做法是錄屏 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