demo-reel 是做什麼的?
您自己負責整個影片的製作:使用者提供產品和要展示的內容,您回傳一個可直接上傳的 MP4 檔案。螢幕上的一切都是真實的產品,即時錄製;專業潤色(視窗框架、相機移動、字幕、標題卡和結尾卡)是在錄製後從原始素材中添加的。
流程及每個步驟產生的檔案:
| 步驟 | 指令 | 產出 |
|---|---|---|
| 1. 故事板 | 您與使用者一起 | 3–5 個功能,每個對應一行字幕 |
| 2. 場景 | 撰寫 scenario.mjs | 使用者將採取的步驟 |
| 3. 拍攝 | bin/reel take scenario.mjs takes/take1 | take1.mov(畫面 + 應用程式聲音)、take1.json(事件、元素位置) |
| 4. 編輯 | 撰寫 edit.json | 場景、鏡頭、字幕、品牌設定 |
| 5. 靜態幀 | bin/reel check edit.json、bin/reel layers edit.json、然後 bin/reel stills edit.json 1,4,9 | 提早發現問題;預覽幀 |
| 6. 字幕 | bin/reel subtitles edit.json,然後閱讀並修正 build/subtitles.srt | 語音內容,作為字幕 |
| 7. 渲染 | bin/reel render edit.json renders/x.mp4 --format all | 每種格式的影片及其 .srt 字幕檔 |
| 8. 檢查 | bin/reel sheet renders/x.mp4 1,4,9,… | 連環靜態圖、時長、響度 |
examples/sawt/ 是一個完整的範例(一個朗讀文章的 Chrome 擴充功能)。在撰寫自己的 scenario.mjs 和 edit.json 之前,請先打開參考。docs/edit-format.md 是編輯檔案的參考文件;docs/lessons.md 列出了初次製作時可能出錯的問題,請在錄製前閱讀。
0. 初始設定(僅需一次)
首先執行 bin/reel doctor:它會檢查所有工具和權限,並告知需要修正的項目。
bin/reel setup 會建構錄製工具(Swift、ScreenCaptureKit),並安裝 playwright-core 和 Chrome for Testing。還需要:ffmpeg、uv、Google Chrome(用於渲染疊加層)。執行您的終端機需要 螢幕與系統音訊錄製 權限(系統設定 → 隱私權與安全性 → 螢幕錄製與音訊錄製);如果錄製工具回報沒有權限,請要求使用者授予權限並重新啟動終端機。
1. 故事板
在錄製前,以簡短幾行達成共識:
- 功能依序排列,每個功能對應一行字幕:一個簡短的標籤(例如「文字縮放」)和一個最多兩行的標題,並在
<b>中放入價值主張(例如「跟著讀。每個字都會隨著朗讀而放大。」); - 要展示的真實內容:一個公開頁面、一個範例帳戶、種子資料。選擇最能展現功能優勢的內容,並確認其效果(對於 Sawt:選擇一篇包含困難詞彙的文章,並且該網站上詞彙卡旁邊有足夠的空間顯示);
- 品牌設定:強調色、淺色變體、背景色調、Logo;標題卡與結尾卡的文字。
預設格式:1080×1350(4:5),25–35 秒——這在手機動態消息中佔據最大面積,且大多數使用者會靜音觀看,因此字幕必須能獨立傳達故事。詢問影片將發布在哪裡:1:1、9:16 和 16:9 都可以從同一個編輯檔產生(使用 --format 參數),所以一併提供這些選項。檢查每個格式的靜態幀:在 4:5 中構圖良好的鏡頭,在 1:1 中可能會裁切到標題;請為每個格式微調偏移量(例如 `