安裝

系統需求

• Node.js 16 以上，或 Bun 1.0.3 以上
• Linux 需要 Libc 2.35 以上版本，且需安裝額外套件。不支援 Alpine Linux 和 nixOS

建立新專案

使用以下指令建立一個新的 Remotion 專案：

# npm
npx create-video@latest
 
# pnpm
pnpm create video
 
# Yarn
yarn create video
 
# Bun
bun create video

💡 第一次使用建議選擇 Hello World 模板。

啟動開發環境

建立完成後，進入專案資料夾並啟動 Remotion Studio：

cd my-video
npm run dev

這會啟動 Remotion Studio，你可以在瀏覽器中即時預覽影片。

Next.js / React Router 7 模板

如果你選擇的是 Next.js 或 React Router 7 模板：

# 啟動應用程式
npm run dev
 
# 單獨啟動 Remotion Studio
npm run remotion

安裝到現有專案

如果你想把 Remotion 加入已有的 React 專案，請參考在現有專案中安裝 Remotion。

專案結構

建立完成後，你會看到以下結構：

my-video/
├── src/
│   ├── Root.tsx          # 註冊所有 Composition
│   ├── Composition.tsx   # 你的影片元件
│   └── index.ts          # 進入點
├── public/               # 靜態資源（圖片、字型等）
├── remotion.config.ts    # Remotion 設定檔
└── package.json

關鍵檔案說明

• Root.tsx：使用 <Composition> 註冊你的影片，定義寬高、FPS 和長度
• Composition.tsx：你的影片 React 元件，這裡是寫動畫的地方
• index.ts：應用程式進入點，引入 Root.tsx
• remotion.config.ts：設定編碼器、Webpack 等選項

下一步

安裝完成後，建議按照以下順序學習：

1. 基礎概念 — 理解「影片 = 時間的函數」
2. 動畫入門 — 學會 useCurrentFrame()、interpolate()、spring()
3. 元件重用與 Sequence — 用元件和時序打造結構化影片
4. 預覽影片 — 在 Remotion Studio 中即時預覽