Remotion 影片工具集
編寫 React 元件，產出真正的 MP4 影片。此技能教導你的 AI agent 如何使用 Remotion 進行建構——從第一個動畫到生產級渲染管線。
總共 29 條規則。涵蓋每項主要的 Remotion 功能。
你可以用這個工具建構什麼
大規模個人化影片 將使用者資料以 JSON props 形式傳入，為每位使用者渲染獨一無二的影片。想想 Spotify Wrapped、GitHub Unwrapped、入門引導等——一個模板，數千個輸出。
自動化的社群媒體短片 提取即時資料（統計數據、排行榜、產品指標），每日或每週渲染影片貼文，無需任何人碰觸時間軸編輯器。
動態廣告與行銷影片 動態置換客戶名稱、產品圖片、定價。同一模板，無限變化。透過 API 或 Lambda 在伺服器端進行渲染。
動畫資料視覺化 將儀表板和 KPI 報告轉換為可分享的影片片段，並包含動畫圖表和轉場效果。
TikTok 和 Reels 字幕 轉錄音訊，顯示逐字高亮的字幕，輸出後可直接上傳。
產品展示影片 從資料庫自動產生——圖片、規格、定價——直接輸出為 MP4。
教育與解說內容 動畫課程教材、證書影片、逐步引導——全部由程式驅動。
影片產生即服務 將渲染功能暴露為 HTTP 端點。你的應用程式發送 JSON，獲得影片檔案。
需求
- Node.js 18+
- React 18+（Remotion 逐幀渲染 React 元件）
- Remotion — 使用
npx create-video@latest建立專案 - FFmpeg — 隨
@remotion/renderer附帶，無需另外安裝 - 如需無伺服器渲染：AWS 帳戶（Lambda）或 GCP 帳戶（Cloud Run）
內部內容
核心
| 規則 | 描述 |
|---|---|
| Compositions | 定義影片、靜態圖片、資料夾、預設屬性、動態中繼資料 |
| Rendering | CLI、Node.js API、AWS Lambda、Cloud Run、Express 伺服器模式 |
| Calculate metadata | 在渲染時動態設定時長、尺寸和屬性 |
動畫與時間軸
| 規則 | 描述 |
|---|---|
| Animations | 淡入淡出、縮放、旋轉、滑動 |
| Timing | 插值曲線、緩動函數、彈簧物理 |
| Sequencing | 延遲、串聯、編排場景 |
| Transitions | 場景之間的轉場效果 |
| Trimming | 裁剪任何動畫的開始或結束部分 |
文字與排版
| 規則 | 描述 |
|---|---|
| Text animations | 打字機效果、文字高亮、揭露效果 |
| Fonts | Google Fonts 和本地字型載入 |
| Measuring text | 將文字適配至容器、偵測溢位 |
媒體
| 規則 | 描述 |
|---|---|
| Videos | 嵌入、裁剪、速度、音量、循環、音高調整 |
| Audio | 匯入、裁剪、淡入淡出、音量與速度控制 |
| Images | Img 元件 |
| GIFs | 與時間軸同步的 GIF 播放 |
| Assets | 將任何媒體匯入 compositions |
| Decode check | 驗證瀏覽器相容性 |
字幕與標題
| 規則 | 描述 |
|---|---|
| Transcribe captions | 透過 Whisper、Deepgram 或 AssemblyAI 將音訊轉為字幕 |
| Display captions | 類似 TikTok 的逐字高亮效果 |
| Import SRT | 載入現有的 .srt 檔案 |
資料視覺化
| 規則 | 描述 |
|---|---|
| Charts | 動畫長條圖、折線圖、資料驅動的視覺效果 |
進階功能
| 規則 | 描述 |
|---|---|
| 3D content | Three.js 與 React Three Fiber |
| Lottie | 透過 Lottie 使用 After Effects 動畫 |
| TailwindCSS | 使用 Tailwind 為 compositions 加入樣式 |
| DOM measurement | 在渲染時測量元素尺寸 |
媒體工具
| 規則 | 描述 |
|---|---|
| Video duration | 取得影片長度（秒） |
| Video dimensions | 取得影片寬度和高度 |
| Audio duration | 取得音訊長度 |
| Extract frames | 在特定時間點提取影格 |
快速開始
# 建立專案
npx create-video@latest my-video
# 在瀏覽器中預覽
cd my-video && npm start
# 渲染為 MP4
npx remotion render src/index.ts MyComposition out/video.mp4
# 傳入動態資料
npx remotion render src/index.ts MyComposition out.mp4 --props '{"title": "Hello"}'
貢獻
原始碼： github.com/shreefentsar/remotion-video-toolkit
缺少某個功能？找到更好的方法？歡迎提交 PR——新的規則、改進的範例、錯誤修復都熱烈歡迎。
由 Zone 99 建立