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

作者：WEB藝術家

日期：2026年4月7日下午12:21

來源：WeChat 原文

✦整理版優先睇

速讀 5 個重點高亮

Remotion 框架最佳實踐指南，幫 React 開發者用組件化方式創造專業視頻

整理版摘要

呢篇文章係介紹一個叫 remotion-best-practices 嘅技能包，嚟自 Remotion 官方嘅 skills 倉庫。個技能包係為咗畀 React 開發者用佢哋熟悉嘅技術棧去程序化噉創建視頻內容，而唔係取代專業視頻軟件。作者想解決嘅問題係：傳統手動剪輯效率低、CSS 動畫喺視頻渲染唔生效、動畫曲線生硬、字幕音頻難同步等等。整體結論係透過幀驅動動畫同物理動畫系統，開發者可以精準控制每一幀，產出流暢自然嘅視頻。

個技能包覆蓋咗 37 個規則模塊，包括動畫、時序、資源、音頻、字幕、圖表、3D 等等，基本上一站式滿足所有視頻創作需求。佢嘅架構好值得學習：主文件 SKILL.md 只做索引同調度，具體實現放喺 rules 目錄下，每個規則獨立維護，職責單一。另外仲有元數據驅動檢索、代碼即文檔、正反例對比等設計模式。

總括嚟講，呢個技能包係 React 開發者嘅視頻創作利器，核心價值係：用 useCurrentFrame() 驅動動畫、用 Spring 物理動畫令視覺更自然、用 <Composition> 同 <Sequence> 組織複雜項目、同埋完整嘅生態覆蓋。一句話：寫 React 代碼，生成專業視頻。

結論：Remotion 令開發者可以用 React 代碼直接驅動視頻每一幀，告別傳統剪輯軟件。
方法：核心係 useCurrentFrame() 加 interpolate() 嚟控制動畫，所有 CSS transition 同 animation 都唔準用。
差異：同一般網頁動畫唔同，Remotion 必須用幀驅動，CSS 動畫喺視頻渲染會失效。
啟發：佢嘅索引+規則分離架構值得借鑑，主文件做路由，規則文件按需加載，職責清晰。
可行動點：開發者可以直接用觸發詞（例如「Remotion 動畫」、「useCurrentFrame」）喺對話框叫出技能，快速生成代碼。

值得記低

連結 github.com

GitHub 倉庫：remotion-dev/skills

Remotion 官方技能包倉庫，包含 SKILL.md 同 37 個規則文件。

整理重點

技能簡介同痛點

呢個技能包叫 remotion-best-practices，係 Remotion 官方出嘅最佳實踐指南。佢專為 React 開發者、視頻自動化工程師同內容創作者設計，幫你用組件化方式創建視頻。

佢仲解決咗字幕、音頻、視頻軌道難以同步嘅問題，提供完整嘅處理規則。總之，呢個係一個一站式嘅索引，唔使再成日返去 Remotion 文檔慢慢揾。

整理重點

核心邏輯與工作流

個技能嘅工作流程係：先識別用戶需求，然後匹配功能模塊，再輸出對應嘅代碼示例。佢分咗四層架構：感知層、認知層、行動層同反饋層。

感知層會解析當前上下文（動畫、時序、資源等），認知層根據需求匹配 37 個規則文件，行動層輸出符合規範嘅代碼，反饋層確保唔用 CSS 動畫等禁止項。

輸出嘅代碼主要用到呢啲 API：useCurrentFrame()、interpolate()、spring()、<Composition>、<Sequence>、<Video>、<Audio>同<Img>。

整理重點

真實用例同接口規範

文章入面有個好好嘅用例：用戶想整一個「文字淡入動畫加背景音樂」嘅視頻。技能會同時加載 animations.md 同 audio.md 兩個規則，然後組合輸出完整代碼。

程式內容 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>
  );
};

輸入方面，技能需要用戶提供代碼上下文同功能需求；輸出就係符合規範嘅代碼示例、建議同相關規則連結。

輸入：用戶代碼（tsx）同需求描述（string）
輸出：示例代碼（tsx）、注意事項（markdown）、規則文件路徑

整理重點

構建模式賞析

呢個 Skill 嘅設計模式好值得學習，主要有四個亮點：

1 索引+規則分離：SKILL.md 做目錄同調度，rules 目錄放具體實現，每個規則獨立維護，唔會令上下文膨脹。
2 元數據驅動檢索：每個規則文件都有統一的 frontmatter，包含 name、description、tags，方便自動化工具索引。
3 代碼即文檔：規則文件直接包含可執行嘅代碼示例，正反例對比，邊界清晰，複製即用。
4 職責邊界清晰：SKILL.md 只負責導航，rules/*.md 負責單一領域嘅最佳實踐，唔會跨領域協調。

另外，佢哋仲顯式聲明咗禁止項，例如 CSS 動畫、Tailwind 動畫類、JavaScript 計時器，減少開發者踩坑。

整理重點

資源同總結

技能包嘅 GitHub 地址係 https://github.com/remotion-dev/skills，入面有主文件 SKILL.md 同 37 個規則文件，涵蓋動畫、時序、組件、字幕、音頻可視化、圖表、3D 等等。

唔支援 CSS transitions 或 animations，一定要用 useCurrentFrame()
動畫時間建議用秒計再乘 fps，唔好用直接用幀數
interpolate 默認唔鉗制值，要加 extrapolateRight: "clamp"
Spring 動畫有自然持續時間，可以用 durationInFrames 限制

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

總括嚟講，呢個技能包核心價值係：幀驅動動畫、物理動畫系統、組件化架構同完整生態覆蓋。係 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)

工作流程圖 (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):

感知層 (Perception): 識別用戶正在處理 Remotion 相關代碼，解析當下嘅上下文（動畫、時序、資源、字幕等）
認知層 (Cognition): 根據需求匹配對應嘅規則文件（37 個規則模塊），提供領域特定嘅最佳做法
行動層 (Action): 輸出符合 Remotion 規範嘅代碼示例，包括：

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

反饋層 (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 執行過程:

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

技能輸出展示:

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`	單一領域嘅最佳做法	跨領域協調

💡 值得參考嘅構建模式

大領域拆細做細規則：Remotion 有 37 個規則文件，每個專注一個具體場景
主文件做路由：SKILL.md 淨係負責「去邊度揾」，唔負責「點樣做」
禁止項目明確聲明：明確寫出 CSS 動畫、Tailwind 動畫類等禁止項目
統一文件結構：每個規則文件跟從 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:

感知層 (Perception): 識別用戶正在處理 Remotion 相關代碼，解析當前上下文（動畫、時序、資源、字幕等）
認知層 (Cognition): 根據需求匹配對應的規則文件（37 個規則模塊），提供領域特定的最佳實踐
行動層 (Action): 輸出符合 Remotion 規範的代碼示例，包括：

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

反饋層 (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 執行過程:

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

技能輸出展示:

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`	單一領域的最佳實踐	跨領域協調

💡 可借鑑的構建模式

大領域拆小規則：Remotion 有 37 個規則文件，每個聚焦一個具體場景
主文件做路由：SKILL.md 只負責"去哪裏找"，不負責"怎麼做"
禁止項顯式聲明：明確寫出 CSS 動畫、Tailwind 動畫類等禁止項
統一文件結構：每個規則文件遵循 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）

10. 總結 (Summary)

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

核心價值：

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

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