每日一技：代碼即視頻的魔法師

作者：WEB藝術家
日期：2026年4月7日 下午12:21
來源：WeChat 原文

✦整理版優先睇

速讀 5 個重點 高亮

Remotion 讓 React 開發者用代碼驅動視頻創作，告別傳統剪輯軟件。

整理版摘要

呢篇文章介紹咗一個叫 remotion-best-practices 嘅技能包，佢係 Remotion 框架嘅完整最佳實踐指南。作者整理咗 GitHub 上 remotion-dev/skills 倉庫嘅內容，目標係幫 React 開發者用組件化方式創建視頻內容，解決傳統視頻編輯效率低、難以自動化嘅問題。

文章詳細說明咗技能包嘅結構，包括主索引文件 SKILL.md 同 37 個規則文件，覆蓋動畫、時序、資源、音頻、字幕等範疇。每個規則文件都有統一 frontmatter，方便檢索同自動化工具使用。技能包嘅核心邏輯係幀驅動動畫，用 useCurrentFrame() 同 interpolate() 控制每一幀，而禁止 CSS 動畫。

整體結論係 Remotion 提供咗一套開發者友好嘅視頻創作方案，適合需要程序化生成影片嘅場景，例如營銷視頻、數據可視化、自動化內容生產。呢個技能包嘅設計模式——索引+規則分離、元數據驅動、代碼即文檔——值得其他技能開發者借鑑。

  • 結論：Remotion 將視頻創作帶入程式碼領域，React 開發者可以寫組件生成專業影片。
  • 方法：所有動畫必須用 useCurrentFrame() 驅動，配合 interpolate() 或 spring() 實現流暢效果。
  • 差異：同傳統剪輯軟件相比，Remotion 嘅影片係程式化產出，易於版本控制同自動化整合。
  • 啟發：技能包採用索引+規則分離架構，主文件只做路由，規則文件獨立維護，清晰易擴展。
  • 可行動點：即刻可以用 Remotion 建立影片模板，注意避開 CSS transition 同 Tailwind 動畫類。
值得記低
連結 github.com

Remotion Skills 倉庫

包含 SKILL.md 同 37 個規則文件

開啟
整理重點

技能簡介與適用場景

呢個技能包係 Remotion 框架嘅最佳實踐指南，專為 React 前端開發者、視頻自動化工程師同內容創作者設計。

用 React 組件化方式創建視頻內容

  • 手動編寫動畫 → 用 useCurrentFrame() 驅動
  • CSS 動畫失效 → 使用 Remotion 插值函數
  • 動畫曲線生硬 → 使用 Spring 物理動畫
  • 字幕音頻難同步 → 提供完整嵌入規則
  • 重複查文檔 → 一站式索引所有功能

技能評級五星，複雜度中等，適合有 React 基礎嘅開發者。

幀驅動動畫係 Remotion 嘅核心概念

整理重點

核心邏輯與架構設計

技能包採用四層架構：感知層識別上下文，認知層匹配規則，行動層輸出代碼，反饋層檢查禁止項。工作流由用戶需求觸發，逐層處理。

工作流程圖 (Mermaid) mermaid 
graph LR
    Input(用戶需求) --> Parser(技能識別)
    Parser --> Match{匹配功能模塊}
    Match --> Animations[動畫規則]
    Match --> Timing[時序控制]
    Match --> Assets[資源處理]
    Match --> Audio[音頻處理]
    Match --> Charts[圖表可視化]
    Animations --> Output[代碼示例]
    Timing --> Output
    Assets --> Output
    Audio --> Output
    Charts --> Output
  1. 1 規則文件統一 frontmatter：name、description、tags、content
  2. 2 tags 實現語義化匹配，description 快速判斷相關性
  3. 3 正反例對比（✅ 正確做法 vs ❌ 禁止做法）

元數據驅動檢索

代碼即文檔，複製即用

主文件只做路由，唔負責具體實現

整理重點

接口規範同真實用例

輸入參數包括用戶代碼上下文（tsx）同功能需求（string）。輸出係符合 Remotion 規範嘅代碼示例同注意事項。

目前正在編輯嘅 Remotion 組件代碼

描述需要嘅視頻功能（動畫、字幕、音頻等）

完整代碼示例：淡入動畫 + 背景音樂 tsx 
import { useCurrentFrame, useVideoConfig, AbsoluteFill, Audio, interpolate } from "remotion";
import staticFile from "./staticFile";

export const MyVideo = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
    extrapolateRight: "clamp",
  });

  return (
    <AbsoluteFill>
      <Audio src={staticFile("bgm.mp3")} />
      <div style={{ opacity, fontSize: 60 }}>
        Hello Remotion!
      </div>
    </AbsoluteFill>
  );
};

所有動畫必須由 useCurrentFrame() 驅動，CSS 動畫喺視頻渲染中唔會生效

關鍵點：動畫時間建議用秒計算再乘以 fps，interpolate 默認唔鉗制值，Spring 動畫可透過 durationInFrames 限制持續時間。

整理重點

快速開始同避坑指南

直接喺對話框輸入指令，例如「幫我用 Remotion 創建一個文字淡入動畫」。觸發詞包括「Remotion 動畫」、「useCurrentFrame」、「Spring 動畫」等。

  • 動畫唔播：檢查是否用咗 CSS 動畫，改用 useCurrentFrame()
  • 動畫超出預期值：加 extrapolateRight: 'clamp'
  • Spring 太彈：調整 damping 參數（例如 damping: 200）
  • 視頻無法解碼：用 canDecode() 檢查瀏覽器兼容性

禁止 CSS transitions

禁止 Tailwind 動畫類（如 animate-bounce）

另外，唔好直接用 JavaScript 計時器（setTimeout、setInterval），動畫時間要基於幀數計算。

🎬 技能介紹：Remotion —— 用代碼整視頻嘅魔法師

📺 寫 React 代碼，渲染專業視頻 —— 唔使再用剪片軟件，用你熟嘅代碼控制每一格

01. 技能一覽 (At a Glance)

字段
內容
技能名稱remotion-best-practices
一句講曬
Remotion 框架嘅完整最佳實踐指南，幫開發者用 React 組件方式整視頻內容
適合邊啲人
React 前端開發者、視頻自動化工程師、內容創作者、營銷視頻製作者
技能評分
⭐⭐⭐⭐⭐（複雜度：中

02. 痛點對比 (Why we need it)

而家 (Before)
用咗技能之後 (After)
手動整視頻動畫，唔知點控制格動畫
使用 useCurrentFrame() 控制曬所有動畫，代碼清晰可控
CSS 動畫喺視頻渲染度失效，成日要除錯
明確唔準用 CSS transitions，直接用 Remotion 插值函數
唔知點樣組織多個視頻項目
使用 <Folder> 和 <Composition> 用組件方式管理視頻模板
動畫曲線好生硬，冇乜自然感覺
用 Spring 物理動畫，輕鬆做到彈性、平滑等效果
字幕、音頻、視頻軌道好難同步
提供完整嘅字幕、音頻可視化、視頻嵌入規則
成日要翻 Remotion 文檔
一站式索引曬所有功能模塊，按需要加載詳細規則

03. 核心邏輯同工作流程 (How it works)

工作流程圖 (Mermaid):

graph LR
    Input(用戶需求) --> Parser(技能識別)
    Parser --> Match{匹配功能模塊}
    Match --> Animations[動畫規則]
    Match --> Timing[時序控制]
    Match --> Assets[資源處理]
    Match --> Audio[音頻處理]
    Match --> Charts[圖表可視化]
    Animations --> Output[代碼示例]
    Timing --> Output
    Assets --> Output
    Audio --> Output
    Charts --> Output

四層架構：

  1. 感知層 (Perception): 認出用戶正在處理 Remotion 相關代碼，分析當前上下文（動畫、時間、資源、字幕等）

  2. 認知層 (Cognition): 按需求配對對應嘅規則檔案（37 個規則模塊），提供領域特定嘅最佳做法

  3. 行動層 (Action): 輸出符合 Remotion 規範嘅代碼例子，包括：

    • 動畫：useCurrentFrame() + interpolate()
    • 時序：spring() + Easing
    • 組件：<Composition> + <Sequence>
    • 資源：<Video> + <Audio> + <Img>

  4. 反饋層 (Feedback): 通過代碼檢查確保唔會用 CSS 動畫、Tailwind 動畫類等禁止項目

04. 接口規範同參數 (The Specification)

輸入 (Inputs):

參數
類型
必填
說明
用戶代碼上下文
code
✅
而家正在編輯嘅 Remotion 組件代碼
功能需求
string
✅
描述需要嘅視頻功能（動畫、字幕、音頻等）

輸出 (Outputs):

字段
類型
說明
代碼示例
tsx
符合 Remotion 規範嘅 React 組件代碼
最佳實踐建議
markdown
針對當前場景嘅優化建議
相關規則連結
file path
指向具體規則檔案嘅引用

例子：

**輸入 (Inputs):**

| 參數 | 類型 | 必填 | 說明 |
|:-----|:-----|:-----|:-----|
| `用戶代碼` | tsx | ✅ | 包含 Remotion 組件的代碼片段 |
| `需求` | string | ✅ | "添加一個淡入動畫" |

**輸出 (Outputs):**

| 字段 | 類型 | 說明 |
|:-----|:-----|:-----|
| `示例代碼` | tsx | 使用 `interpolate()` 實現淡入效果的代碼 |
| `注意事項` | string | 禁止使用 CSS transition，必須用幀驅動 |

05. 真實使用例子 (Case Study)

用戶輸入: 「我需要整一個視頻，包含文字淡入動畫同背景音樂」

技能執行過程:

  1. 認出需求涉及到兩個模塊：animations.md 和 audio.md
  2. 加載動畫規則，提供 useCurrentFrame() + interpolate() 示例
  3. 加載音頻規則，提供 <Audio> 組件使用方式
  4. 組合輸出完整代碼例子

技能輸出展示:

import { useCurrentFrame, useVideoConfig, AbsoluteFill, Audio, interpolate } from "remotion";
import staticFile from "./staticFile";

export const MyVideo = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // 淡入動畫：2秒內從透明到不透明
  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
    extrapolateRight: "clamp",
  });

  return (
    <AbsoluteFill>
      <Audio src={staticFile("bgm.mp3")} />
      <div style={{ opacity, fontSize: 60 }}>
        Hello Remotion!
      </div>
    </AbsoluteFill>
  );
};

關鍵點: 所有動畫必須由 useCurrentFrame() 驅動，CSS 動畫喺視頻渲染係唔會生效㗎！

06. 快速上手 (Quick Start)

方法一：喺對話框用

直接發送指令: "幫我用 Remotion 創建一個 [具體效果] 的視頻組件"

方法二：觸發詞

以下表述會自動觸發技能：
- "Remotion 動畫"、"Remotion 視頻"
- "useCurrentFrame"、"spring 動畫"
- "視頻字幕"、"音頻可視化"

方法三：指定功能模塊

"加載 Remotion 的 [功能模塊] 規則"
例如: "加載 Remotion 的字幕規則"
     "加載 Remotion 的 Spring 動畫規則"

07. 限制同避坑指南 (Boundary)

不支持:

  • ❌ CSS transitions 或 animations（視頻渲染唔會生效）
  • ❌ Tailwind 動畫類名（例如 animate-bounce）
  • ❌ 直接用 JavaScript 計時器（setTimeout、setInterval）

注意:

  • ⚠️ 動畫時間建議用秒計再乘以 fps，唔好用直接嘅格數
  • ⚠️ interpolate 預設唔會夾硬限制數值，超出範圍會繼續向外推
  • ⚠️ Spring 動畫有自然持續時間，可以通過 durationInFrames 強制限制

常見問題:

問題
解決方法
動畫唔播
檢查係咪用咗 CSS 動畫，轉用 useCurrentFrame()
動畫超出預期數值
給 interpolate 添加 { extrapolateRight: "clamp" }
Spring 動畫太彈
調整 config: { damping: 200 } 得到平滑效果
視頻解碼唔到
使用 canDecode() 檢查瀏覽器兼容性

08. 技能結構賞析 (Build Pattern)

呢個技能嘅結構有幾個值得參考嘅設計模式：

📚 索引+規則分離架構

remotion/
├── SKILL.md          # 索引文件：快速導航 + 觸發條件
└── rules/
    ├── animations.md  # 領域規則：具體實現
    ├── timing.md
    └── ... (37個)

優點：

  • 主檔案保持精簡，淨係做「目錄」同「調度」
  • 規則檔案按需要加載，避免上下文太長
  • 每個規則獨立維護，職責單一

🏷️ 元數據驅動檢索

每個規則檔案都有統一嘅 frontmatter：

---
name:animations
description:FundamentalanimationskillsforRemotion
metadata:
tags:animations,transitions,frames,useCurrentFrame
---

優點：

  • 通過 tags 做到語義匹配
  • description 用嚟快速判斷係咪相關
  • 方便自動化工具索引同檢索

⚡ 代碼即文檔

規則檔案直接包含可執行嘅代碼例子：

// ✅ 正確做法
const opacity = interpolate(frame, [0, 100], [0, 1]);

// ❌ 禁止做法
// CSS transitions 不會在視頻渲染中生效

優點：

  • 複製就用得，唔使再轉換
  • 正反例子對比，邊界清晰
  • 減少理解成本

🎯 職責邊界清晰

模塊
職責
不負責
SKILL.md
索引、導航、觸發條件
具體實現
rules/*.md
單一領域嘅最佳做法
跨領域協調

💡 可以參考嘅構建模式

  1. 大領域拆細規則：Remotion 有 37 個規則檔案，每個集中一個具體場景
  2. 主檔案做路由：SKILL.md 淨係負責「去邊度揾」，唔負責「點樣做」
  3. 禁止項目明確寫出：清楚寫明 CSS 動畫、Tailwind 動畫類等禁止項目
  4. 統一檔案結構：每個規則檔案跟返 name → description → tags → content 的模式

09. 倉庫同資源 (Repository & Resources)

GitHub 地址: https://github.com/remotion-dev/skills

相關檔案:

文件
說明
SKILL.md
主技能檔案，索引所有規則模塊
rules/animations.md
動畫基礎規則
rules/timing.md
時間同緩動函數
rules/compositions.md
組件定義同組織
rules/subtitles.md
字幕處理
rules/audio-visualization.md
音頻可視化
rules/charts.md
圖表動畫
rules/transitions.md
場景轉場
rules/3d.md
3D 內容（Three.js）

完整規則列表（37個）: 3d, animations, assets, audio, audio-visualization, calculate-metadata, can-decode, charts, compositions, display-captions, extract-frames, ffmpeg, fonts, get-audio-duration, get-video-dimensions, get-video-duration, gifs, images, light-leaks, lottie, maps, measuring-dom-nodes, measuring-text, parameters, sequencing, sfx, subtitles, tailwind, text-animations, timing, transcribe-captions, transitions, transparent-videos, trimming, videos, voiceover

10. 總結 (Summary)

remotion-best-practices 係俾「React 開發者」用嘅「視頻創作技能包」 —— 唔係為咗取代專業視頻軟件，而係等開發者用熟嘅 React 技術棧自動化整視頻內容。

核心價值：

  • 🎯 格驅動動畫：用 useCurrentFrame() 精確控制每一格
  • 🧠 物理動畫系統：Spring 動畫帶來自然流暢嘅視覺效果
  • 🔧 組件化架構：<Composition> + <Sequence> 組織複雜視頻項目
  • 📝 完整生態覆蓋：37 個規則模塊覆蓋字幕、音頻、圖表、3D 等所有場景

一句講曬：寫 React 代碼，生成專業視頻 —— 前端開發者嘅視頻創作利器


🎬 SKILL 介紹：Remotion —— 代碼即視頻的魔法師

📺 寫 React 代碼，渲染專業視頻 —— 告別剪輯軟件，用你熟悉的代碼驅動每一幀

01. 技能名片 (At a Glance)

字段
內容
技能名稱remotion-best-practices
一句話定義
Remotion 框架的完整最佳實踐指南，幫助開發者用 React 組件化方式創建視頻內容
適用人羣
React 前端開發者、視頻自動化工程師、內容創作者、營銷視頻製作者
技能評級
⭐⭐⭐⭐⭐（複雜度：中

02. 痛點對標 (Why we need it)

現狀 (Before)
使用 SKILL 後 (After)
手動編寫視頻動畫，不知道如何驅動幀動畫
使用 useCurrentFrame() 驅動所有動畫，代碼清晰可控
CSS 動畫在視頻渲染中失效，反覆調試
明確禁止 CSS transitions，直接使用 Remotion 插值函數
不知道如何組織多個視頻項目
使用 <Folder> 和 <Composition> 組件化管理視頻模板
動畫曲線生硬，缺乏自然感
使用 Spring 物理動畫，輕鬆實現彈性、平滑等效果
字幕、音頻、視頻軌道難以同步
提供完整的字幕、音頻可視化、視頻嵌入規則
需要重複查閲 Remotion 文檔
一站式索引所有功能模塊，按需加載詳細規則

03. 核心邏輯與工作流 (How it works)

Workflow Diagram (Mermaid):

graph LR
    Input(用戶需求) --> Parser(技能識別)
    Parser --> Match{匹配功能模塊}
    Match --> Animations[動畫規則]
    Match --> Timing[時序控制]
    Match --> Assets[資源處理]
    Match --> Audio[音頻處理]
    Match --> Charts[圖表可視化]
    Animations --> Output[代碼示例]
    Timing --> Output
    Assets --> Output
    Audio --> Output
    Charts --> Output

Four-Layer Architecture:

  1. 感知層 (Perception): 識別用戶正在處理 Remotion 相關代碼，解析當前上下文（動畫、時序、資源、字幕等）

  2. 認知層 (Cognition): 根據需求匹配對應的規則文件（37 個規則模塊），提供領域特定的最佳實踐

  3. 行動層 (Action): 輸出符合 Remotion 規範的代碼示例，包括：

    • 動畫：useCurrentFrame() + interpolate()
    • 時序：spring() + Easing
    • 組件：<Composition> + <Sequence>
    • 資源：<Video> + <Audio> + <Img>

  4. 反饋層 (Feedback): 通過代碼檢查確保不使用 CSS 動畫、Tailwind 動畫類等禁止項

04. 接口規範與參數 (The Specification)

輸入 (Inputs):

參數
類型
必填
說明
用戶代碼上下文
code
✅
當前正在編輯的 Remotion 組件代碼
功能需求
string
✅
描述需要的視頻功能（動畫、字幕、音頻等）

輸出 (Outputs):

字段
類型
說明
代碼示例
tsx
符合 Remotion 規範的 React 組件代碼
最佳實踐建議
markdown
針對當前場景的優化建議
相關規則連結
file path
指向具體規則文件的引用

Example:

**輸入 (Inputs):**

| 參數 | 類型 | 必填 | 說明 |
|:-----|:-----|:-----|:-----|
| `用戶代碼` | tsx | ✅ | 包含 Remotion 組件的代碼片段 |
| `需求` | string | ✅ | "添加一個淡入動畫" |

**輸出 (Outputs):**

| 字段 | 類型 | 說明 |
|:-----|:-----|:-----|
| `示例代碼` | tsx | 使用 `interpolate()` 實現淡入效果的代碼 |
| `注意事項` | string | 禁止使用 CSS transition，必須用幀驅動 |

05. 真實用例展示 (Case Study)

用戶輸入: "我需要創建一個視頻，包含文字淡入動畫和背景音樂"

SKILL 執行過程:

  1. 識別需求涉及兩個模塊：animations.md 和 audio.md
  2. 加載動畫規則，提供 useCurrentFrame() + interpolate() 示例
  3. 加載音頻規則，提供 <Audio> 組件使用方式
  4. 組合輸出完整代碼示例

技能輸出展示:

import { useCurrentFrame, useVideoConfig, AbsoluteFill, Audio, interpolate } from "remotion";
import staticFile from "./staticFile";

export const MyVideo = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // 淡入動畫：2秒內從透明到不透明
  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
    extrapolateRight: "clamp",
  });

  return (
    <AbsoluteFill>
      <Audio src={staticFile("bgm.mp3")} />
      <div style={{ opacity, fontSize: 60 }}>
        Hello Remotion!
      </div>
    </AbsoluteFill>
  );
};

關鍵點: 所有動畫必須由 useCurrentFrame() 驅動，CSS 動畫在視頻渲染中不會生效！

06. 快速開始 (Quick Start)

方式一：在對話框中使用

直接發送指令: "幫我用 Remotion 創建一個 [具體效果] 的視頻組件"

方式二：觸發詞

以下表述會自動觸發技能：
- "Remotion 動畫"、"Remotion 視頻"
- "useCurrentFrame"、"spring 動畫"
- "視頻字幕"、"音頻可視化"

方式三：指定功能模塊

"加載 Remotion 的 [功能模塊] 規則"
例如: "加載 Remotion 的字幕規則"
     "加載 Remotion 的 Spring 動畫規則"

07. 侷限性與避坑指南 (Boundary)

不支持:

  • ❌ CSS transitions 或 animations（視頻渲染不生效）
  • ❌ Tailwind 動畫類名（如 animate-bounce）
  • ❌ 直接使用 JavaScript 計時器（setTimeout、setInterval）

注意:

  • ⚠️ 動畫時間建議用秒計算再乘以 fps，而非直接用幀數
  • ⚠️ interpolate 默認不鉗制值，超出範圍會繼續外推
  • ⚠️ Spring 動畫有自然持續時間，可通過 durationInFrames 強制限制

常見問題:

問題
解決方案
動畫不播放
檢查是否使用了 CSS 動畫，改用 useCurrentFrame()
動畫超出預期值
給 interpolate 添加 { extrapolateRight: "clamp" }
Spring 動畫太彈
調整 config: { damping: 200 } 獲得平滑效果
視頻無法解碼
使用 canDecode() 檢查瀏覽器兼容性

08. Skill 構建賞析 (Build Pattern)

這個 Skill 在構建上有幾個值得借鑑的設計模式：

📚 索引+規則分離架構

remotion/
├── SKILL.md          # 索引文件：快速導航 + 觸發條件
└── rules/
    ├── animations.md  # 領域規則：具體實現
    ├── timing.md
    └── ... (37個)

優點：

  • 主文件保持精簡，只做"目錄"和"調度"
  • 規則文件按需加載，避免上下文膨脹
  • 每個規則獨立維護，職責單一

🏷️ 元數據驅動檢索

每個規則文件都有統一的 frontmatter：

---
name:animations
description:FundamentalanimationskillsforRemotion
metadata:
tags:animations,transitions,frames,useCurrentFrame
---

優點：

  • 通過 tags 實現語義化匹配
  • description 用於快速判斷是否相關
  • 便於自動化工具索引和檢索

⚡ 代碼即文檔

規則文件直接包含可執行的代碼示例：

// ✅ 正確做法
const opacity = interpolate(frame, [0, 100], [0, 1]);

// ❌ 禁止做法
// CSS transitions 不會在視頻渲染中生效

優點：

  • 複製即用，無需二次轉換
  • 正反例對比，邊界清晰
  • 減少理解成本

🎯 職責邊界清晰

模塊
職責
不負責
SKILL.md
索引、導航、觸發條件
具體實現
rules/*.md
單一領域的最佳實踐
跨領域協調

💡 可借鑑的構建模式

  1. 大領域拆小規則：Remotion 有 37 個規則文件，每個聚焦一個具體場景
  2. 主文件做路由：SKILL.md 只負責"去哪裏找"，不負責"怎麼做"
  3. 禁止項顯式聲明：明確寫出 CSS 動畫、Tailwind 動畫類等禁止項
  4. 統一文件結構：每個規則文件遵循 name → description → tags → content 的模式

09. 倉庫與資源 (Repository & Resources)

GitHub 地址: https://github.com/remotion-dev/skills

相關文件:

文件
說明
SKILL.md
主技能文件，索引所有規則模塊
rules/animations.md
動畫基礎規則
rules/timing.md
時序與緩動函數
rules/compositions.md
組件定義與組織
rules/subtitles.md
字幕處理
rules/audio-visualization.md
音頻可視化
rules/charts.md
圖表動畫
rules/transitions.md
場景轉場
rules/3d.md
3D 內容（Three.js）

完整規則列表（37個）: 3d, animations, assets, audio, audio-visualization, calculate-metadata, can-decode, charts, compositions, display-captions, extract-frames, ffmpeg, fonts, get-audio-duration, get-video-dimensions, get-video-duration, gifs, images, light-leaks, lottie, maps, measuring-dom-nodes, measuring-text, parameters, sequencing, sfx, subtitles, tailwind, text-animations, timing, transcribe-captions, transitions, transparent-videos, trimming, videos, voiceover

10. 總結 (Summary)

remotion-best-practices 是給"React 開發者"用的"視頻創作技能包" —— 不是為了替代專業視頻軟件，而是讓開發者用熟悉的 React 技術棧程序化創建視頻內容。

核心價值：

  • 🎯 幀驅動動畫：用 useCurrentFrame() 精確控制每一幀
  • 🧠 物理動畫系統：Spring 動畫帶來自然流暢的視覺效果
  • 🔧 組件化架構：<Composition> + <Sequence> 組織複雜視頻項目
  • 📝 完整生態覆蓋：37 個規則模塊覆蓋字幕、音頻、圖表、3D 等全場景

一句話：寫 React 代碼，生成專業視頻 —— 前端開發者的視頻創作利器