JEO-tech-ai/oh-my-unity3d

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

資產準備規則：

• 標誌：SVG 或高解析度 PNG
• 截圖：標準化至目標寬高比
• 音訊：MP3 或 WAV；標準化音量
• 字型：網頁字型或本地字型檔案

步驟 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} // 60秒，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。最後加上行動呼籲。

預期輸出：

## 場景分解
1. 開場鉤子 (0:00-0:05)：標誌 + 標語
2. 問題 (0:05-0:15)：痛點視覺化
3. 解決方案 (0:15-0:30)：產品展示
4. 功能 (0:30-0:45)：關鍵優勢（3 項）
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 的字型和對比鮮明的顏色

---

輸出格式

## 影片製作報告

### 規格
- 時長：60秒
- 寬高比：16:9
- FPS：30

### 場景計畫
| 場景 | 時長 | 視覺 | 音訊 | 轉場 |
|-------|----------|--------|-------|------------|
| 開場鉤子 | 0:00-0:05 | 標誌淡入 | BGM 開始 | 淡出 |
| ...   | ...      | ...    | ...   | ...  |

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

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

---

多代理工作流程

驗證與回顧

• 回合 1（協調者）：規格完整性、場景覆蓋率
• 回合 2（分析師）：敘事一致性、節奏審查
• 回合 3（執行者）：驗證渲染就緒檢查清單

代理角色

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

---

中繼資料

版本

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

相關技能

• 圖片生成
• 簡報建立器
• 前端設計

標籤

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