Remotion Studio
深入了解 Remotion Studio 的功能與使用方式。
什麼是 Remotion Studio？
Remotion Studio 是 Remotion 內建的開發與預覽環境。它是一個在瀏覽器中執行的應用程式，讓你：
- 即時預覽影片
- 切換和管理 Composition
- 修改 Props 並即時看到效果
- 直接渲染影片
啟動 Studio
npm run dev
# 或
npx remotion studio預設在 http://localhost:3000 開啟。
介面總覽
Studio 的介面分為幾個區域：
左側面板
- Composition 列表 — 所有已定義的 Composition
- 點選切換不同的影片
中央區域
- 預覽畫面 — 影片的即時渲染結果
- 時間軸 — 底部的播放控制和幀指示器
- 可以拖曳時間軸跳到任意幀
右側面板
- Props 編輯器 — 如果有定義 Zod Schema，會自動產生表單控制項
- 文字 → 文字輸入框
- 布林值 → 開關
- 數字 → 數字輸入框
- 顏色 → 顏色選擇器
鍵盤快捷鍵
| 快捷鍵 | 功能 |
|---|---|
Space | 播放 / 暫停 |
← → | 前一幀 / 下一幀 |
Shift + ← → | 跳 10 幀 |
J | 倒轉 |
K | 暫停 |
L | 快轉 |
Home | 跳到開頭 |
End | 跳到結尾 |
I | 設定 In point |
O | 設定 Out point |
X | 清除 In/Out point |
Enter | 開始渲染 |
在 Studio 中渲染
點擊右上角的 Render 按鈕或按 Enter，可以直接在 Studio 中渲染影片：
- 選擇輸出格式（MP4、WebM、GIF 等）
- 設定編碼器和品質
- 選擇輸出路徑
- 點擊渲染
渲染進度會顯示在 Studio 底部。
Fast Refresh
修改程式碼並儲存後，Studio 會自動更新預覽——不需要重新整理頁面。這讓開發迴圈非常快速。
小結
- Remotion Studio 是開發和預覽的核心工具
- 支援 Props 視覺化編輯（需 Zod Schema）
- 豐富的鍵盤快捷鍵加速操作
- 可直接在 Studio 內渲染輸出
- Fast Refresh 即時反映程式碼變更