Marve10s/Better-Fullstack

Remotion 影片製作

可程式化的影片製作技能，使用 Remotion。從文字指示自動產生影片，以大規模產出一致且符合品牌的影片。

何時使用此技能

• 自動化影片生成：根據文字指示產生影片
• 品牌影片製作：大量產出風格一致的影片
• 可程式化內容：結合旁白、視覺與動畫
• 行銷內容：產品介紹、入門引導、宣傳影片

---

指示

步驟 1：定義影片規格

video_spec:
  audience: [目標觀眾]
  goal: [影片目標]
  duration: [總長度 - 30s, 60s, 90s]
  aspect_ratio: "16:9" | "1:1" | "9:16"
  tone: "快節奏" | "平靜" | "電影感"
  voice:
    style: [旁白風格]
    language: [語言]

步驟 2：規劃場景

場景結構範本：

## 場景規劃

### 場景 1：開場鉤子 (0:00 - 0:05)
- **視覺**：產品標誌淡入
- **音訊**：輕快開場音樂
- **文字**：「轉換你的工作流程」
- **轉場**：淡出 → 場景 2

### 場景 2：問題 (0:05 - 0:15)
- **視覺**：問題狀態示意圖
- **音訊**：旁白開始
- **文字**：關鍵訊息疊加
- **轉場**：向左滑動

### 場景 3：解決方案 (0:15 - 0:30)
...

步驟 3：準備資產

# 資產檢查清單
assets/
├── logos/
│   ├── logo-main.svg
│   └── logo-white.svg
├── screenshots/
│   ├── dashboard.png
│   └── feature-1.png
├── audio/
│   ├── bgm.mp3
│   └── narration.mp3
└── fonts/
    └── brand-font.woff2

資產準備規則：

• Logo：SVG 或高解析度 PNG
• 螢幕截圖：統一調整至目標寬高比
• 音訊：MP3 或 WAV；音量歸一化
• 字型：Webfont 或本地字型檔案

步驟 4：實作 Remotion 組合

// src/Video.tsx
import { Composition } from 'remotion';
import { IntroScene } from './scenes/IntroScene';
import { ProblemScene } from './scenes/ProblemScene';
import { SolutionScene } from './scenes/SolutionScene';
import { CTAScene } from './scenes/CTAScene';

export const RemotionVideo: React.FC = () => {
  return (
    <>
      <Composition
        id="ProductIntro"
        component={ProductIntro}
        durationInFrames={1800} // 60s at 30fps
        fps={30}
        width={1920}
        height={1080}
      />
    </>
  );
};

// 場景元件範例
const IntroScene: React.FC<{ frame: number }> = ({ frame }) => {
  const opacity = interpolate(frame, [0, 30], [0, 1]);

  return (
    <AbsoluteFill style={{ opacity }}>
      <Logo />
      <Title>轉換你的工作流程</Title>
    </AbsoluteFill>
  );
};

步驟 5：渲染與品質檢查

# 1. 預覽渲染（低畫質）
npx remotion preview src/Video.tsx

# 2. 品質檢查
- [ ] 時間點
- [ ] 音訊同步
- [ ] 文字可讀性
- [ ] 流暢轉場

# 3. 最終渲染
npx remotion render src/Video.tsx ProductIntro out/video.mp4

---

範例

範例 1：產品介紹影片

提示詞：

建立一部 60 秒的產品介紹影片，包含 6 個場景、
快節奏語調，輸出為 16:9。結尾包含行動呼籲（CTA）。

預期輸出：

## 場景分解
1. 開場鉤子 (0:00-0:05)：Logo + 標語
2. 問題 (0:05-0:15)：痛點視覺化
3. 解決方案 (0:15-0:30)：產品展示
4. 功能 (0:30-0:45)：三個主要優勢
5. 社會證明 (0:45-0:55)：見證/數據
6. 行動呼籲 (0:55-1:00)：行動呼籲 + 聯絡資訊

## Remotion 結構
- src/scenes/HookScene.tsx
- src/scenes/ProblemScene.tsx
- src/scenes/SolutionScene.tsx
- src/scenes/FeaturesScene.tsx
- src/scenes/SocialProofScene.tsx
- src/scenes/CTAScene.tsx

範例 2：入門引導影片

提示詞：

產生一部 45 秒的入門引導影片，使用螢幕截圖、
包含標註箭頭，並採用 9:16 格式以適合行動裝置。

預期輸出：

• 5 個步驟的場景規劃
• 資產清單（螢幕截圖、標註箭頭）
• 文字疊加與轉場
• 已套用行動裝置安全邊距

---

最佳實踐

1. 簡短場景：每個場景清楚呈現，5-10 秒
2. 一致的字體排版：定義字體排版比例尺
3. 音訊同步：讓旁白提示與視覺對齊
4. 範本重複使用：儲存可重複使用的組合
5. 安全區域：為行動裝置寬高比保留邊距

---

常見錯誤

• 文字過多：限制每個場景的文字量
• 忽略行動裝置安全區域：檢查 9:16 輸出邊緣
• 未經品質檢查就進行最終渲染：務必先在預覽中驗證

---

疑難排解

問題：音訊與視覺不同步

原因：影格時間點不匹配 解決方案：重新計算影格並對齊時間戳記

問題：渲染緩慢或失敗

原因：資產過大或特效過重 解決方案：壓縮資產並簡化動畫

問題：文字難以閱讀

原因：字型太小或對比度不足 解決方案：使用至少 24px 字型和高對比度顏色

---

輸出格式

## 影片製作報告

### 規格
- 長度：60s
- 寬高比：16:9
- FPS：30

### 場景規劃
| 場景 | 時間點 | 視覺 | 音訊 | 轉場 |
|-------|----------|--------|-------|------------|
| 開場鉤子 | 0:00-0:05 | Logo 淡入 | BGM 開始 | 淡出 |
| ...   | ...      | ...    | ...   | ...  |

### 資產
- [ ] logo.svg
- [ ] 螢幕截圖 (3 張)
- [ ] bgm.mp3
- [ ] narration.mp3

### 渲染檢查清單
- [ ] 預覽品質檢查通過
- [ ] 音訊同步已驗證
- [ ] 安全區域已檢查
- [ ] 最終渲染完成

---

多代理工作流程

驗證與回顧

• 第一輪（編排者）：規格完整性、場景涵蓋範圍
• 第二輪（分析師）：敘事一致性、節奏審查
• 第三輪（執行者）：驗證渲染就緒檢查清單

代理角色

代理	角色
Claude	場景規劃、腳本撰寫
Gemini	資產分析、最佳化建議
Codex	產生 Remotion 程式碼、執行渲染

---

元資料

版本

• 目前版本：1.0.0
• 最後更新：2026-01-21
• 相容平台：Claude, ChatGPT, Gemini, Codex

相關技能

• 前端設計

標籤

#video #remotion #animation #storytelling #automation #react