預覽影片 - RemotionLab

Remotion Studio

Remotion Studio 是內建的開發環境，讓你在瀏覽器中即時預覽影片。啟動方式：

npm run dev

預設會在 http://localhost:3000 開啟。

Studio 介面

Studio 介面由幾個部分組成：

預覽區域 — 顯示影片畫面，可以拖曳時間軸來檢視不同幀
時間軸 — 底部的時間軸，顯示目前幀數和總長度
側邊欄 — 列出所有 Composition，點選切換
Props 面板 — 右側面板，可以即時修改 Composition 的 Props

播放控制

快捷鍵	功能
`Space`	播放 / 暫停
`←` / `→`	前一幀 / 下一幀
`J` / `L`	倒轉 / 快轉
`Home` / `End`	跳到開頭 / 結尾

即時更新

Studio 支援 Fast Refresh——當你修改程式碼並儲存時，預覽會立即更新，不需要重新整理頁面。這讓開發體驗非常流暢。

多個 Composition

如果你的專案有多個 Composition，可以在側邊欄切換。每個 Composition 就像一支獨立的影片：

export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition id="Intro" component={Intro} ... />
      <Composition id="MainContent" component={MainContent} ... />
      <Composition id="Outro" component={Outro} ... />
    </>
  );
};

Studio 會自動列出所有 Composition，讓你分別預覽。

小結

npm run dev 啟動 Remotion Studio
用時間軸和快捷鍵瀏覽影片的每一幀
修改程式碼後即時更新預覽
多個 Composition 可以在側邊欄切換