Remotion 宣傳影片工廠

Remotion 宣傳影片工廠 是做什麼的？

使用此技能來製作可重複、高品質的應用程式介紹影片，採用 Remotion。 此技能特意設計為與應用程式無關，適用於 UI 密集型產品和非 UI 產品。

核心規則

1. 以官方 Remotion 技能規則為主要權威。
2. 所有動畫皆透過 useCurrentFrame() 搭配 interpolate() 和 spring() 驅動。
3. 以秒為單位設計時間，再使用 sec() 進行轉換。
4. 先選擇應用程式類型的藍圖；不要預設只做 UI 展示。
5. 偏好可重複使用的視覺元件，而非一次性的錄製素材。
6. 在動畫修飾之前，先套用排版規則。
7. 每次重大修改後，使用畫面截圖進行驗證，然後執行型別檢查和渲染。
8. 若無逐幀證據，不得聲稱品質成功。
9. 未經使用者明確同意，不得提交、推送或標記任務完成。

官方技能整合

始終先閱讀 references/official-skill-integration.md。

各階段所需的官方規則組：

1. 合成階段：compositions、parameters、calculate-metadata
2. 動畫階段：animations、timing、sequencing、transitions
3. 素材階段：assets、images、fonts
4. 可選階段：audio、videos、subtitles、text-animations

參考資料

• 應用程式類型選擇與場景範本：references/app-type-blueprints.md
• 官方 Remotion 規則對應：references/official-skill-integration.md
• 時間線與動畫模式：references/timeline-and-motion.md
• 時間預算與除錯循環：references/timing-and-debug-loop.md
• 排版與可讀性規則：references/typography-and-readability.md
• 可重複使用的視覺建構區塊：references/visual-primitives.md
• 品質檢查清單：references/qa-checklist.md
• 故障排除指南：references/troubleshooting.md

工作流程

步驟 1：收集輸入

從本地專案上下文（README、文檔、登陸頁面、現有 UI、CLI/API 範例）收集：

1. 目標受眾
2. 一句話核心承諾
3. 可用的證據素材（UI、程式碼、日誌、指標、見證）
4. 可用的媒體素材（標誌、螢幕截圖、剪輯、音訊）

步驟 2：選擇應用程式類型藍圖

閱讀 references/app-type-blueprints.md 並選擇一種：

1. UI 為中心的應用程式
2. API/SDK 應用程式
3. 開發者工具/基礎架構應用程式
4. AI/自動化應用程式

根據所選藍圖建立鏡頭列表。

步驟 3：敘事與時長

1. 定義故事弧線：鉤子 -> 問題 -> 機制 -> 證據 -> 行動呼籲
2. 選擇目標長度：15秒、30秒、45秒 或 60秒
3. 在實作之前先分配場景時長

步驟 4：合成設定

1. 在 src/Root.tsx 中定義 Composition
2. 新增 schema 和 defaultProps
3. 在 calculateMetadata 中計算時長
4. 使用 TransitionSeries 在 src/Video.tsx 中連接場景

步驟 5：場景建構

1. 先在 src/components 中建構可重複使用的元件
2. 使用這些元件在 src/scenes 中組裝場景
3. 使用絕對定位搭配常數來處理佈局和時序
4. 場景檔案應專注於編排，而非低階 UI 細節

步驟 6：排版調整

閱讀 references/typography-and-readability.md 並先設定所有主要文字大小。

1. 套用 1920x1080 的建議大小範圍
2. 除非有明確理由，否則遵守硬性最小值
3. 在動畫修飾之前，先確認行動裝置/iOS 的可讀性

步驟 7：動畫調整

1. 為可讀性使用梯形淡入淡出
2. 使用彈簧效果處理入場和游標式移動
3. 為每個場景新增 exitOpacity 以避免過渡期間的重疊偽影
4. 使用疊加層/字幕來明確表示階段變化

步驟 8：時序合理性檢查

閱讀 references/timing-and-debug-loop.md 並驗證時間預算：

1. 檢查文字停留時間和閱讀窗口
2. 檢查處理和結果持有時間
3. 檢查過渡重疊和交接時序
4. 在進行修飾工作之前修正時間線常數

步驟 9：品質保證循環（需要證據）

1. 每次重大變更後擷取關鍵畫面
2. 審查視覺清晰度、時序、重疊和構圖平衡
3. 在除錯日誌中記錄通過/失敗證據
4. 迭代直到所有關鍵檢查點通過

必要時使用 scripts/capture-frames.sh。

如果圖片讀取工具失敗或未返回有用內容，請重新擷取並重試。不要在無法驗證檢查的情況下繼續。

步驟 10：最終驗證

1. npx tsc --noEmit
2. npm run -s build
3. 如果可用，執行 npm run -s build:gif
4. 渲染最終 mp4 並驗證執行時間和輸出大小
5. 根據預期場景行為重新檢查關鍵時間戳

必要時使用 scripts/verify-build.sh。

步驟 11：交接與核准

1. 報告基於證據的品質保證摘要（哪些通過/失敗及原因）
2. 列出已知的權衡或殘留風險
3. 在提交/推送/任務完成之前徵求明確核准

輸出格式

報告工作時，請包含：

1. 所選的應用程式類型和藍圖
2. 場景結構和最終時長
3. 已實作的主要元件
4. 關鍵動畫決策
5. 時間預算檢查與結果
6. 驗證命令與結果
7. 剩餘風險或後續事項

護欄

1. 對本地圖片使用 Img + staticFile()。
2. 在模組範圍載入字型，不要在 effect 內部。
3. 保持 Sequence 佈局和 premount 設定的相容性。
4. 使用 references/typography-and-readability.md 中的排版硬性最小值。
5. 將複雜效果集中在一個焦點區域。
6. 不要在一次剪輯中為太多目標進行最佳化；保持單一主要訊息。
7. 若無明確證據，切勿將輸出描述為「完美」。
8. 即使渲染命令成功，也不要跳過品質保證證據。