前言：喺2026年嘅今日，影片已經成為資訊傳播嘅主要載體。Remotion+AI嘅出現，完美解決咗傳統動效工具學習曲線太斜、純AI生成影片缺乏精準控制嘅問題。呢個就係「AI寫code，code精準渲染」嘅黃金組合。

Remotion嘅工作原理：

1. Webpack打包React應用
2. Chrome Headless透過CDP協議逐格注入幀號
3. 執行page.captureScreenshot()截取每一格
4. 格數據透過stdin管道串流傳俾FFmpeg
5. FFmpeg實時編碼成MP4影片

Remotion+AI嘅獨特優勢

• 一句話整影片：只要描述想要嘅效果，AI會自動生成code
• 精準到像素：元素移動精準到座標，時間精準到毫秒
• 數據驅動：直接讀取Excel、CSV、JSON自動生成影片
• 無限重用：寫好組件，喺無數影片入面重複使用
• 自適應尺寸：橫版影片一鍵轉豎版
• 完全免費：個人同3人以下嘅小團隊可以免費商用

# 官方安裝方式（推薦）

curl -fsSL https://claude.ai/install.sh | bash

# npm安裝方式

npm install -g @anthropic-ai/claude-code

# 登入Claude帳號

claude auth login

# 用npm

npx create-video@latest

# 或者用bun（速度更快）

bunx create-video@latest

# 進入項目並啟動

cd my-first-video

npm run dev

關鍵步驟：安裝Remotion Skills，等Claude Code理解Remotion

npx skills add remotion-dev/skills

提示詞模板：

請幫我實現[鏡頭名稱]組件。要求：時長[X]秒，畫面內容[描述]，動畫效果[描述]，用spring動畫。

// 淡入淡出

const opacity = interpolate(frame, [0, 30], [0, 1]);

// 滑入

const translateX = interpolate(frame, [0, 30], [-100, 0]);

// 縮放動畫

const scale = spring({ frame, fps, config: { damping: 10 } });

// 旋轉動畫

const rotate = interpolate(frame, [0, 60], [0, 360]);

❌ 唔好咁樣：將字體大小改成48px

✅ 要咁樣：將fontSize抽成組件嘅props，預設48

// remotion.config.ts

Config.setVideoImageFormat("png");

Config.setPixelFormat("rgba");

// 橫版

<Composition width={1920} height={1080} ... />

// 豎版

<Composition width={1080} height={1920} ... />

✅ 主場（隨便打）

• 數據可視化（柱狀圖、折線圖、圓餅圖、競速圖）
• UI示範同產品動畫
• 地圖動畫（路線、熱力圖、擴散效果）
• 程式碼示範同終端效果
• 文字動畫同字幕效果
• 音頻可視化

⚠️ 過渡區（要搭配外部庫）

• 3D動效（需要React Three Fiber）
• 粒子效果（需要外部粒子庫）
• 綠幕摳像（需要FFmpeg）

❌ 唔適合做（有更好嘅工具）

• 實拍風格影片（用Sora、Veo）
• 複雜嘅角色動畫（用AE、Blender）
• 影片剪輯（用剪映、DaVinci Resolve）
• 相片修圖（用Photoshop）

結語

Remotion+AI唔係要取代任何現有嘅工具，而係畀我哋一條整動效嘅最快路徑。如果你係知識博主、產品經理或者創業者，而你唔想花幾個月時間去學AE，咁Remotion+AI絕對係你嘅不二之選。

記住，工具只係手段，創意先係核心。Remotion將你從煩瑣嘅技術細節解放出嚟，令你可以專注喺內容本身。

而家，打開你嘅終端機，輸入 npx create-video@latest，開始你嘅第一個Remotion項目啦！

前言：在2026年的今天，視頻已經成為信息傳播的主要載體。Remotion+AI的出現，完美解決了傳統動效工具學習曲線陡峭、純AI生成視頻缺乏精確控制的問題。這就是"AI寫代碼，代碼精確渲染"的黃金組合。

Remotion的工作原理：

1. Webpack打包React應用
2. Chrome Headless通過CDP協議逐幀注入幀號
3. 執行page.captureScreenshot()截取每一幀
4. 幀數據通過stdin管道流式傳輸給FFmpeg
5. FFmpeg實時編碼成MP4視頻

Remotion+AI的獨特優勢

• 一句話做視頻：只需要描述想要的效果，AI自動生成代碼
• 精確到像素：元素移動精確到座標，時間精確到毫秒
• 數據驅動：直接讀取Excel、CSV、JSON自動生成視頻
• 無限複用：寫好組件，在無數視頻中重複使用
• 自適應尺寸：橫版視頻一鍵轉豎版
• 完全免費：個人和3人以下小團隊可免費商用

# 官方安裝方式（推薦）

curl -fsSL https://claude.ai/install.sh | bash

# npm安裝方式

npm install -g @anthropic-ai/claude-code

# 登錄Claude賬號

claude auth login

# 使用npm

npx create-video@latest

# 或使用bun（速度更快）

bunx create-video@latest

# 進入項目並啓動

cd my-first-video

npm run dev

關鍵步驟：安裝Remotion Skills，讓Claude Code理解Remotion

npx skills add remotion-dev/skills

提示詞模板：

請幫我實現[鏡頭名稱]組件。要求：時長[X]秒，畫面內容[描述]，動畫效果[描述]，使用spring動畫。

// 淡入淡出

const opacity = interpolate(frame, [0, 30], [0, 1]);

// 滑動進入

const translateX = interpolate(frame, [0, 30], [-100, 0]);

// 縮放動畫

const scale = spring({ frame, fps, config: { damping: 10 } });

// 旋轉動畫

const rotate = interpolate(frame, [0, 60], [0, 360]);

❌ 不要這樣：把字體大小改成48px

✅ 要這樣：把fontSize提取成組件的props，默認48

// remotion.config.ts

Config.setVideoImageFormat("png");

Config.setPixelFormat("rgba");

// 橫版

<Composition width={1920} height={1080} ... />

// 豎版

<Composition width={1080} height={1920} ... />

✅ 主場（隨便打）

• 數據可視化（柱狀圖、折線圖、餅圖、競速圖）
• UI演示與產品動畫
• 地圖動畫（路線、熱力圖、擴散效果）
• 代碼演示與終端效果
• 文字動畫與字幕效果
• 音頻可視化

⚠️ 過渡區（需搭配外部庫）

• 3D動效（需要React Three Fiber）
• 粒子效果（需要外部粒子庫）
• 綠幕摳像（需要FFmpeg）

❌ 不適合做（有更好的工具）

• 實拍風格視頻（用Sora、Veo）
• 複雜的角色動畫（用AE、Blender）
• 視頻剪輯（用剪映、達芬奇）
• 照片修圖（用Photoshop）

結語

Remotion+AI不是要取代任何現有的工具，而是為我們提供了一條製作動效的最快路徑。如果你是知識博主、產品經理或者創業者，而你又不想花幾個月的時間去學AE，那麼Remotion+AI絕對是你的不二之選。

記住，工具只是手段，創意才是核心。Remotion把你從繁瑣的技術細節中解放出來，讓你能夠專注於內容本身。

現在，打開你的終端，輸入 npx create-video@latest，開始你的第一個Remotion項目吧！