Communitygithub.com

講解影片:Remotion 精修、封面與匯出驗證

Remotion 製作 Skill,把草稿打磨成精緻的 React 影片:確定性的逐格動態、場景節奏、精靈圖清理、開場封面與品牌片尾、轉場、配樂擷取、算圖錯誤修復以及匯出驗證。

講解影片:Remotion 精修、封面與匯出驗證 是什麼?

「講解影片」配方第 2 步(讓它像專業出品),來自 10and01/10and01-remotion-skill。Agent 把 Remotion 當成確定性的逐格算圖器:先記錄算圖約定(畫布尺寸、FPS、長度、場景邊界、素材、編碼),用具名常數建模時間,所有動畫都由 useCurrentFrame 和有鉗制的 interpolate 驅動,不用 CSS 計時器,裁切、錨點和字幕都放在型別化資料裡。它按需讀取精靈圖、場景架構、封面與片尾、算圖與音訊故障(delayRender、記憶體不足)和發布文案等專項參考,最後驗證匯出的檔案,並依成片寫出封面圖提示詞和短影音文案。

相容平台~Claude Code✓Codex CLI~Cursor
npx skills add 10and01/10and01-remotion-skill

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

Remotion Production

將 Remotion 影片建構為確定性幀渲染器。將素材幾何、視覺錨點、時間軸時序和最終媒體驗證視為獨立問題處理。

路由任務

僅閱讀與請求相關的參考文件。在選擇匯入方式前,請檢查已安裝的 Remotion 版本,因為較舊的專案可能從 remotion 暴露媒體元件,而目前的專案則使用 @remotion/media。

生產工作流程

1. 建立渲染契約

在編輯前檢查現有專案。記錄:

  • 合成 ID、寬度、高度、FPS 和持續時間;
  • 場景邊界以及幀是全域的還是相對於 Sequence 的;
  • 來源素材的尺寸、透明度、幀中繼資料和音訊持續時間;
  • 所需的輸出編解碼器、目標位置和可用的渲染資源;
  • 交付成果是否包含開場封面場景、獨立封面圖片、結尾卡、可聽見的音訊、刻意靜音或發佈文案。

保留不相關的工作區變更。傾向於做一個小型、有針對性的變更,而不是重構一個可運作的專案。

2. 明確地模型化時間

將場景持續時間和剪輯幀定義為具名常數或資料。從 useCurrentFrame() 和 useVideoConfig() 推導動畫狀態。

const spriteIndex =
  Math.floor((frame * spriteFps) / compositionFps) % sequence.length;

對於連續運動,使用帶有夾緊範圍的 interpolate()。請勿使用 CSS 轉場、CSS 關鍵影格、即時時鐘計時器、隨機值或可變的播放狀態來進行渲染動畫。

3. 分離來源幾何與呈現

將裁切矩形、動畫順序、內容邊界和視覺錨點保留在型別化的資料中。讓渲染元件消費這些資料,而不是在 CSS 或標籤中重複座標。

對以下項目使用相同的計算後當前幀物件:

  • 可見的裁切;
  • 幀計數器和突出顯示的儲存格;
  • JSON/座標面板;
  • 描述當前幀的標題。

這可以防止在正確的動畫上出現過時的解釋性 UI。

當顯示影片條格時,產生一個包含精確當前幀的視窗。請勿在渲染不同裁切時突出顯示最接近的取樣幀。

4. 穩定主要主體

為動畫使用固定的視口。首先裁切精確的來源矩形,然後使用逐幀視覺錨點或可見內容框,在視口內平移該裁切後的幀。當圖稿在儲存格內移動時,請勿僅將原始儲存格矩形置中。

對於精靈圖,請驗證每個邊緣幀以及任何包含長形肢體(如尾巴、頭髮、陰影或運動軌跡)的幀。請遵循 references/sprite-sheets.md 中的詳細工作流程。

5. 建立場景連續性

為合成提供一個在所有場景序列之外的持久不透明基底背景。場景背景也可以保持不透明。將轉場應用為幀驅動的覆蓋層,置於場景上方以及任何最終的暗角或安全覆蓋層下方。

保持裝飾效果從屬於解說。轉場應隱藏剪輯,而不是揭露透明度、棋盤格、相鄰的精靈圖儲存格或未掛載的內容。

當請求包含封面或結尾時,將其實作為一級場景,並在有用時渲染一個獨立的封面合成。請遵循 references/covers-and-endings.md。除非使用者只要求一個提示,否則請勿用封面產生提示來取代實際的 Remotion 封面。

6. 添加並混合音訊

使用 staticFile() 參考本地音訊。透過選擇足夠長的音軌、刻意循環或刻意修剪來覆蓋整個合成。對於使用者提供的長音軌,請檢查其持續時間、靜音和響度,然後僅將所需的摘錄放入 public/audio/。選擇一個音樂上自然的邊界,而不是僅依賴響度。

對於淡入淡出,使用基於幀的音量回呼,並保持背景音樂夠低,以便容納旁白或教學文字。當 Remotion 已擁有音量包絡時,避免將淡入淡出烘焙到摘錄中。

請勿僅從 Studio 預覽就宣告音訊完成。驗證匯出的檔案包含可測量的非靜音音訊串流。

7. 按範圍遞增驗證

按以下順序執行檢查:

  1. 對專案進行型別檢查。
  2. 在封面、每個剪輯的兩側、代表性的精靈圖幀、結尾入口點以及最終定格處渲染靜態幀。
  3. 渲染完整的合成。
  4. 如果 Chrome 耗盡 RAM 或暫存磁碟,請在變更應用程式程式碼之前降低渲染並行度。
  5. 檢查最終容器的持續時間、視訊串流和所需的音訊串流。

匯出後使用內建驗證器:

node /path/to/remotion-production/scripts/verify-render.mjs out/video.mp4 --expect-duration 35 --expect-width 1920 --expect-height 1080 --expect-video-codec h264 --require-audible-audio

即使目標位置存在檔案,也將部分或失敗的輸出視為無效。

8. 在要求時準備發佈文案

根據最終合成、經過驗證的主體、教學重點、視覺風格、持續時間和目標受眾來建立封面提示和影片描述。直接在使用者對話中輸出這些交付成果。請勿建立提示或描述檔案、呼叫圖像生成工具或產生封面圖片,除非使用者明確要求這些操作。

請遵循 references/publishing-copy.md。使結果易於複製、針對目標平台簡潔,並以使用者的語言撰寫。

完成標準

在滿足以下條件之前,請勿聲稱完成:

  • 動畫是根據幀確定性推導的;
  • 主體邊界在整個循環中保持完整且視覺穩定;
  • 解釋性座標隨著渲染的精靈圖幀更新;
  • 場景剪輯從不暴露透明或棋盤格偽影;
  • 媒體素材載入時沒有洩漏的渲染控制代碼;
  • 完整渲染在穩定的並行度下成功;
  • 匯出的檔案具有預期的持續時間、所需的音訊/視訊串流,並且在需要音樂時具有非靜音的音訊。
  • 在完整狀態、轉場邊界和最終幀處對請求的封面和結尾場景進行視覺檢查;
  • 獨立的封面圖稿包含其自己的不透明背景,並與影片層級結構匹配;
  • 請求的封面提示和發佈描述準確反映最終影片,並直接傳遞在對話中。

報告輸出路徑、渲染命令、驗證結果,以及任何刻意降低的並行度。

相關技能