Communitygithub.com

espennilsen/pi

Remotion 最佳實踐 - 在 React 中製作影片

pi 是什麼?

此技能引導開發者如何正確使用 Remotion 在 React 中進行影片製作。它涵蓋從新專案初始化、Studio 預覽、單幀檢查到進階主題(如字幕、音訊視覺化、音效、3D 內容、動畫、圖表、轉場、透明度影片和語音旁白)的所有最佳實踐。該技能支援 Remotion Studio 和 CLI 工具,並包含詳細的規則檔案,針對每個主題提供程式碼範例和逐步說明。無論是處理基本動畫、音訊編輯、Lottie 整合,還是 Mapbox 地圖動畫,這套技能都能確保開發者遵循官方推薦的模式,避免常見錯誤,並高效地創建高品質的影片內容。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/espennilsen/pi/tree/HEAD/skills/remotion

在你喜歡的 AI 中提問

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

說明文件

使用時機

每當你處理 Remotion 程式碼時,請使用此技能以獲取領域特定知識。

新專案設定

當位於空資料夾或無現有 Remotion 專案的工作區時,請使用以下指令建立新專案:

npx create-video@latest --yes --blank --no-tailwind my-video

將 my-video 替換為合適的專案名稱。

啟動預覽

啟動 Remotion Studio 以預覽影片:

npx remotion studio

可選:單幀渲染檢查

你可以使用 CLI 渲染單一幀,以檢查佈局、顏色或時間點是否正確。 在進行簡單編輯、純重構,或已從 Studio 或先前的渲染中獲得足夠信心時,可以跳過此步驟。

npx remotion still [composition-id] --scale=0.25 --frame=30

在 30 fps 的情況下,--frame=30 代表一秒鐘的標記(--frame 從 0 開始計算)。

字幕

當處理字幕或標題時,請載入 ./rules/subtitles.md 檔案以獲取更多資訊。

使用 FFmpeg

對於某些影片操作,例如修剪影片或偵測靜音,應使用 FFmpeg。請載入 ./rules/ffmpeg.md 檔案以獲取更多資訊。

靜音偵測

當需要從影片或音訊檔案中偵測並修剪靜音片段時,請載入 ./rules/silence-detection.md 檔案。

音訊視覺化

當需要將音訊視覺化(如頻譜長條、波形、低音反應效果)時,請載入 ./rules/audio-visualization.md 檔案以獲取更多資訊。

音效

當需要使用音效時,請載入 ./rules/sfx.md 檔案以獲取更多資訊。

如何使用

請閱讀各個規則檔案以獲取詳細說明和程式碼範例:


來源:remotion-dev/skills

相關技能