Remotion Server 是做什麼的？
在任意 Linux 伺服器上以無頭渲染模式製作影片，使用 Remotion v5。不需要 Mac 或圖形介面。 Chrome Headless Shell 負責所有渲染工作——可在 VPS、樹莓派、CI Runner、Docker 容器等任何 Node.js 可運行的環境中運作。 FFmpeg 已內建於每個 Remotion 專案中，無需另外安裝 FFmpeg。
設定（一次性）
安裝 Chrome Headless Shell 所需的瀏覽器相依套件：
bash {baseDir}/scripts/setup.sh
此腳本會安裝 Chrome 在無頭 Linux 上所需的系統函式庫（libnss3、libatk、libgbm、libcups2 等）。 支援 Ubuntu 22.04/24.04、Debian 與 Amazon Linux。
驗證設定
設定完成後，確認 Chrome Headless Shell 可正常運作：
npx @remotion/chrome-headless-shell --help
如果此指令失敗，表示系統相依套件未安裝完全。請重新執行 setup.sh 或手動安裝：
# Ubuntu/Debian
sudo apt install -y libnss3 libatk1.0-0 libatk-bridge2.0-0 libcups2 libgbm1 \
libpango-1.0-0 libcairo2 libxcomposite1 libxdamage1 libxfixes3 libxrandr2
# Amazon Linux
sudo yum install -y mesa-libgbm libX11 libXrandr libdrm libXdamage libXfixes \
libxkbcommon dbus-libs libXcomposite alsa-lib nss pango cups-libs at-spi2-core atk
快速開始
建立專案
bash {baseDir}/scripts/create.sh my-video
cd my-video
渲染影片
npx remotion render MyComp out/video.mp4
在瀏覽器中預覽（開發模式）
npx remotion preview
開啟本地開發伺服器，可在其中拖曳時間軸、調整屬性，然後在渲染前進行迭代。
渲染選項（5 種渲染方式）
Remotion v5 提供五種渲染後端。請根據您的基礎架構與規模選擇。
1. 本地 CLI（預設）
在執行 Node.js 的機器上渲染。最適合開發、CI 以及單伺服器部署。
npx remotion render MyComp out/video.mp4
2. Remotion Lambda
將渲染任務分散到 AWS Lambda 函數上執行。支援最多約 80 分鐘的 Full HD 影片。提供非同步通知用的 Webhook 與內建成本估算功能。
npm install @remotion/lambda
# 部署 Lambda 函數
npx remotion lambda functions deploy
# 在 Lambda 上渲染
npx remotion lambda render MyComp
# 渲染前估算成本
npx remotion lambda still --estimate-price MyComp
主要特色：
- 跨多個 Lambda 調用的分散式渲染
- 渲染完成後的 Webhook 回呼
- 渲染前的成本估算
- S3 輸出儲存
詳見 https://www.remotion.dev/docs/lambda
3. @remotion/vercel（2025 年 2 月新增）
在 Vercel Sandboxes 內渲染。設定最簡單——無需 AWS 帳戶。
npm install @remotion/vercel
將 Remotion 專案部署到 Vercel，並透過 API 觸發渲染。最適合已在使用 Vercel 且想要零配置渲染的團隊。
詳見 https://www.remotion.dev/docs/vercel
4. Cloud Run（alpha）
在 Google Cloud Run 上渲染。對於較長的影片，運算成本低於 Lambda。
npm install @remotion/cloudrun
npx remotion cloudrun render MyComp
詳見 https://www.remotion.dev/docs/cloudrun
5. EC2 上的 GPU 渲染（v4.0.248+）
在 EC2 GPU 實例上進行硬體加速渲染。對於具有大量動畫或 3D 內容的複雜合成，這是最快的選項。
需要一個配備 GPU 的 EC2 實例（例如 g4dn.xlarge）以及適當的驅動程式。
詳見 https://www.remotion.dev/docs/gpu
社群媒體格式預設
建立合成時，可使用這些解析度與寬高比預設。傳入 --width 和 --height 給 npx remotion render 以覆蓋合成預設值。
TikTok / YouTube Shorts / Instagram Reels（9:16 垂直）
npx remotion render ChatDemo out/tiktok.mp4 --width=1080 --height=1920
- 解析度：1080x1920
- 寬高比：9:16
- 建議 FPS：30
- 最大時長：60 秒（TikTok）、60 秒（Shorts）、90 秒（Reels）
YouTube 標準（16:9 橫向）
npx remotion render MyComp out/youtube.mp4 --width=1920 --height=1080
- 解析度：1920x1080
- 寬高比：16:9
- 建議 FPS：30 或 60
Instagram 貼文（1:1 正方形）
npx remotion render MyComp out/instagram-post.mp4 --width=1080 --height=1080
- 解析度：1080x1080
- 寬高比：1:1
- 最大時長：60 秒
Twitter/X 影片（16:9 橫向）
npx remotion render MyComp out/twitter.mp4 --width=1280 --height=720
- 解析度：1280x720
- 寬高比：16:9
- 最大檔案大小：512MB
- 最大時長：140 秒
格式預設總表
| 平台 | 寬度 | 高度 | 比例 | FPS |
|---|---|---|---|---|
| TikTok | 1080 | 1920 | 9:16 | 30 |
| YouTube Shorts | 1080 | 1920 | 9:16 | 30 |
| Instagram Reel | 1080 | 1920 | 9:16 | 30 |
| Instagram Post | 1080 | 1080 | 1:1 | 30 |
| YouTube | 1920 | 1080 | 16:9 | 30 |
| Twitter/X | 1280 | 720 | 16:9 | 30 |
在程式碼中建立 Composition 時，直接設定 width、height 與 fps：
<Composition
id="TikTokPromo"
component={PromoVideo}
durationInFrames={30 * 15}
fps={30}
width={1080}
height={1920}
/>
新套件（v4.0.429+）
@remotion/sfx（v4.0.429）
內建音效，快速加入音訊提示：
import { Sfx } from "@remotion/sfx";
// 可用音效：ding、bruh、vineBoom
<Sfx name="ding" />
<Sfx name="bruh" />
<Sfx name="vineBoom" />
@remotion/starburst（v4.0.435）
星爆形狀與動畫元件：
import { Starburst } from "@remotion/starburst";
<Starburst
points={12}
innerRadius={50}
outerRadius={100}
fill="yellow"
/>
@remotion/shapes（更新至 v4.0.432）
幾何形狀原始組件。現在包含 Arrow 形狀：
import { Triangle, Star, Pie, Arrow } from "@remotion/shapes";
<Triangle length={100} direction="up" fill="red" />
<Star points={5} innerRadius={30} outerRadius={60} fill="gold" />
<Pie radius={50} progress={0.75} fill="blue" />
<Arrow length={150} direction="right" fill="black" />
@remotion/captions
為影片內容加入動畫字幕。支援逐字時間軸與多種動畫風格：
import { Caption } from "@remotion/captions";
<Caption
text="Hello world"
startFrame={0}
endFrame={60}
style="bounce"
/>
@remotion/player
無需渲染成檔案，即可在 React 應用程式中嵌入 Remotion 影片。提供控制項的互動式播放：
import { Player } from "@remotion/player";
<Player
component={MyComp}
durationInFrames={300}
fps={30}
compositionWidth={1920}
compositionHeight={1080}
controls
/>
Mediabunny（格式轉換）
Mediabunny 是 @remotion/media-parser 與 @remotion/webcodecs 的繼任者。內建於 Remotion 的 GPU 加速格式轉換工具。
支援輸入：MP4、WebM、MOV、MKV、M3U8、TS、AVI、MP3、FLAC、WAV、M4A、AAC 支援輸出：MP4、WebM、WAV
import { convertMedia } from "@remotion/media-converter";
await convertMedia({
src: "input.mov",
container: "mp4",
});
Remotion Skills（2026 年 1 月）
用於提示生成影片工作流程的 AI 代理整合。Claude Code 可以根據自然語言描述生成 Remotion 合成。
"建立一部 15 秒的 TikTok 影片，文字顯示『新功能』，
以彈簧動畫淡入，然後顯示三個重點項目"
AI 代理會生成 TSX 合成、註冊並渲染——全部透過單一提示完成。
模板
所有模板皆透過 create.sh 腳本建立。每個模板都會產生一個完整的 Remotion 專案，包含 TypeScript、TailwindCSS 4.2.0 以及模板元件。
聊天示範（Telegram 風格手機模擬）
動畫聊天氣泡在手機模擬框內依序出現。適合產品示範、機器人展示、客戶服務亮點。
bash {baseDir}/scripts/create.sh my-chat --template chat
cd my-chat
編輯 src/messages.json 以自訂對話內容：
[
{"text": "如何重設我的密碼？", "isUser": true},
{"text": "前往設定 > 帳戶 > 重設密碼。你將在大約 30 秒內收到一封電子郵件。", "isUser": false},
{"text": "收到，謝謝！", "isUser": true}
]
以 TikTok 解析度渲染：
npx remotion render ChatDemo out/chat-tiktok.mp4 --width=1080 --height=1920
預設合成：1080x1920（垂直）、30fps、時長根據訊息數量自動計算。
標題卡片（動畫開場）
使用彈簧動畫的淡入標題。適用於影片開場、章節標題或獨立公告卡片。
bash {baseDir}/scripts/create.sh my-intro --template title
cd my-intro
透過編輯 src/TitleCard.tsx 的 defaultProps 來自訂：
defaultProps={{ title: "產品上市", subtitle: "2026 年 3 月即將推出" }}
以 YouTube 解析度渲染：
npx remotion render TitleCard out/title-youtube.mp4 --width=1920 --height=1080
預設合成：1920x1080（橫向）、30fps、3 秒。
空白（起始模板）
用於從頭開始建立自訂合成的空白畫布。
bash {baseDir}/scripts/create.sh my-project
cd my-project
顯示影格計數器。將 src/Composition.tsx 替換為您自己的元件。
建立自訂模板
若要新增模板（例如促銷、程式碼逐步解說、統計儀表板、倒數計時、見證），請建立一個使用 Remotion 原始組件的 React 元件：
import { AbsoluteFill, useCurrentFrame, spring, useVideoConfig, interpolate, Sequence, Img, Audio } from "remotion";
用於模板的關鍵 Remotion API：
useCurrentFrame()- 用於動畫的目前影格編號spring({ frame, fps, config })- 彈簧物理動畫interpolate(frame, inputRange, outputRange)- 線性插值<Sequence from={30}>- 將子內容延遲 N 個影格<Img src={staticFile("logo.png")} />- 載入靜態資源<Audio src={staticFile("music.mp3")} />- 加入背景音訊<AbsoluteFill>- 全影格容器
在 src/Root.tsx 中註冊合成：
import { Composition } from "remotion";
import { PromoVideo } from "./PromoVideo";
export const RemotionRoot: React.FC = () => {
return (
<>
<Composition
id="PromoVideo"
component={PromoVideo}
durationInFrames={300}
fps={30}
width={1080}
height={1920}
/>
</>
);
};
縮圖生成
使用 Remotion 的 still 指令將單一影格萃取為靜態圖片：
npx remotion still MyComp out/thumbnail.png
選項
# 指定影格（預設為影格 0）
npx remotion still MyComp out/thumb.png --frame=45
# JPEG 輸出
npx remotion still MyComp out/thumb.jpeg --image-format=jpeg
# JPEG 品質（0-100）
npx remotion still MyComp out/thumb.jpeg --image-format=jpeg --jpeg-quality=90
# 自訂解析度
npx rem