用 React 做程序化視頻？先裝這個 Remotion Skill

作者：海邊的小魚乾
日期：2026年6月10日 上午8:10
來源：WeChat 原文

✦整理版優先睇

速讀 5 個重點 高亮

裝 Remotion Skill，避免導出全黑：用幀驅動代替 CSS 動畫

整理版摘要

呢篇文章係技術分享，作者介紹點樣用 React 做程序化視頻，重點推薦一個叫 remotion-best-practices 嘅 AI Skill。Remotion 將視頻當成「可編程的 React 組件」，每一幀由 useCurrentFrame() 驅動，但好多人會錯用 CSS transition 或 @keyframes，導致瀏覽器睇到但導出全黑。呢個 Skill 就係為咗解決呢個問題，佢將官方踩坑清單、子領域規則（轉場、字幕、配音等）打包成 AI 可檢索嘅操作手冊。安裝之後，AI 會自動用幀驅動嘅寫法，唔會再亂用 CSS 動畫類。

文章詳細講解咗五條硬規則：動畫只用幀唔用 CSS、資源放 public/ 並用 staticFile()、時間軸用 Sequence 切片、Composition 元數據寫喺 Root、預設用 studio 同 still 抽查。呢啲規則係避開常見錯誤嘅關鍵。另外 Skill 仲包含多個子規則文件（rules/），涵蓋轉場、字幕、配音、3D、Lottie、地圖等場景，開發時可以點名加載對應文件。

最後作者提供三個可落地嘅項目模板（參數化社交短片、解說視頻、數據回顧片），同埋一個推薦工作流口令。總括嚟講，如果你用 Cursor 做視頻自動化，呢個 Skill 可以大幅減少調試次數，將時間思維內建喺 AI 默認路徑。文章結尾提到下一篇可以寫「配音驅動時長 + 自動字幕」完整倉庫結構。

  • 裝呢個 Skill 可以大幅避免 CSS 動畫導致導出全黑等常見錯誤。
  • 核心方法：用 useCurrentFrame + interpolate 代替 CSS transition，資源用 staticFile 統一管理。
  • 差異：Skill 將官方踩坑清單打包成 AI 可檢索規則，比自己搜文檔更高效自然。
  • 啟發：Remotion 嘅時間思維係將每一幀視為狀態快照，理解呢點先寫得穩陣。
  • 可行動點：安裝 Skill 後，用 create-video 搭建項目，並根據場景加載對應子規則文件。
結構示例

內容片段

內容片段 text 
import { useCurrentFrame, useVideoConfig, interpolate, Easing } from "remotion";export const FadeIn = () => {  const frame = useCurrentFrame();  const { fps } = useVideoConfig();  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {    extrapolateRight: "clamp",    extrapolateLeft: "clamp",    easing: Easing.bezier(0.16, 1, 0.3, 1),  });  return <div style={{ opacity }}>Hello World!</div>;};
整理重點

點解要裝呢個 Skill？

Remotion 將視頻當成「可編程的 React 組件」，每一幀由 useCurrentFrame() 驅動。呢個係核心機制，但好多開發者習慣用 CSS transition 或 @keyframes，呢啲寫法喺瀏覽器可以鬱，但導出 MP4 時成日全黑或定格。

每一幀由 useCurrentFrame() 驅動 — 記住呢個核心

禁用 CSS 動畫類係第一條規矩。

禁止 CSS transition 同 @keyframes

remotion-best-practices 係 Cursor / Claude Code 生態裏專為 Remotion 設計嘅 Skill。佢將官方踩坑清單、子領域規則打包成 AI 可檢索嘅操作手冊。一句話：佢唔係教程壓縮版，而係畀 AI 用嘅。

禁止項 + 標準套路 + 子規則索引

整理重點

五條硬規則（一定要跟）

  1. 1 動畫：只用 useCurrentFrame + interpolate，禁止 CSS transition / animation，Tailwind 動畫類都唔得。
  2. 2 資源：放 public/，用 staticFile() 同 <Img>，唔好直接用相對路徑。
  3. 3 時間軸：用 <Sequence> 切片，配合 from 同 durationInFrames 控制出場同長度。
  4. 4 Composition 元數據：喺 Root.tsx 宣告 width, height, fps, durationInFrames，必要時用 calculateMetadata 動態調整時長。
  5. 5 預覽：日常用 npx remotion studio，抽檢用 npx remotion still 睇特定幀。

改用 interpolate 同 spring 做幀動畫

staticFile() 統一資源路徑

整理重點

能力地圖同三個模板

Skill 主文件係索引，具體實現喺 rules/ 子文件。按場景對照：轉場、字幕、配音、3D、地圖等都有對應 .md。

rules/ 子文件：轉場、字幕、配音、3D、地圖

文章提供三個可落地嘅項目模板：

  • 參數化社交短視頻：用 Zod 定義 props，Studio 側邊欄改參數，批量導出唔同版本。
  • 解說視頻（配音驅動時長）：腳本拆 JSON，TTS 生成音頻，calculateMetadata 自動計算總時長。
  • 數據回顧片：注入 JSON 數據，TransitionSeries 切換章節，結尾 still 導出封面。

配音驅動時長 + 自動字幕

整理重點

常見踩坑同推薦口令

  • 導出全靜：用咗 CSS transition → 改 interpolate 或 spring。
  • 圖片 404：冇放 public/ 或冇用 staticFile → 統一資源。
  • 音畫不同步：時長寫死、音頻更長 → 用 calculateMetadata。
  • 字體方塊：冇按規則加載字體 → 跟 google-fonts / local-fonts 規則。

推薦工作流口令（直接貼畀 Cursor）：加載 remotion-best-practices → 設定 composition 參數 → 禁止 CSS → 用 Sequence 排列 → 完成後 studio 預覽。

用 Sequence 排列時間軸

studio 預覽 + still 抽檢

用 React 寫視頻時，別讓 AI 踩幀動畫的坑

圖片

Remotion 把視頻當成「可編程的 React 組件」——每一幀由 useCurrentFrame() 驅動，而不是靠 CSS transition 或 @keyframes。這套思路很爽，但也很容易寫出「在瀏覽器裏能動、導出卻全黑/全靜」的代碼。

remotion-best-practices 是 Cursor / Claude Code 生態裏專門給 Remotion 用的 Skill：把官方踩坑清單、子領域規則（轉場、字幕、參數化、配音等）打包成 AI 可檢索的操作手冊。裝好之後，你說「幫我做個帶轉場的片頭」，它會優先走 interpolate + Sequence，而不是隨手寫 Tailwind 動畫類。

下面按「裝什麼 → 遵守什麼 → 能做什麼 → 怎麼開工」講清楚。

一、這個 Skill 解決什麼問題

痛點
沒有 Skill 時
有 Skill 後
動畫寫法
AI 常寫 CSS transition / Tailwind animate-*
強制幀驅動：useCurrentFrame + interpolate
資源引用
相對路徑、import 圖片路徑混亂
public/
 + staticFile() + <Img>
時間編排
全靠 setTimeout 或嵌套 div
<Sequence>
、TransitionSeries
子能力分散
字幕、FFmpeg、3D 各自搜文檔
Skill 內 rules/*.md 按場景加載
空項目起步
不知道從哪 scaffold
自帶 create-video 腳手架命令

一句話：它不是 Remotion 教程的壓縮版，而是給 AI 用的「禁止項 + 標準套路 + 子規則索引」。

二、安裝與觸發

2.1 安裝

Skill 通常位於用戶級 agents skills 目錄。若你通過 skills CLI 管理，可先搜索再安裝：

npx skills find remotion

常見安裝方式（以實際倉庫座標為準）：

npx skills add <倉庫>@remotion-best-practices -y -g

安裝後，在 Cursor 對話裏 手動附加/remotion-best-practices，或自然語言觸發，例如：

  • 「用 Remotion 做一個 1080×1080 的片頭」
  • 「這段 React 組件改成 Remotion 可渲染的淡入」
  • 「給 composition 加 Zod 參數，標題可在 Studio 側邊欄改」

2.2 何時應該加載它

Skill 自述的觸發條件很直白：凡是碰 Remotion 代碼，就應該加載。 包括：

  • 新建 Remotion 項目
  • 把現有 React UI 遷到視頻裏
  • 渲染 still / MP4 / 透明視頻
  • 字幕、配音、音頻頻譜、地圖飛線等進階需求

三、核心最佳實踐（必須遵守）

這些是 Skill 主文件裏反覆強調的「硬規則」，違反後 Studio 裏可能能看，導出經常翻車。

3.1 動畫：只用幀，不用 CSS

import { useCurrentFrame, useVideoConfig, interpolate, Easing } from "remotion";

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

  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
    extrapolateRight: "clamp",
    extrapolateLeft: "clamp",
    easing: Easing.bezier(0.16, 1, 0.3, 1),
  });

  return <div style={{ opacity }}>Hello World!</div>;
};

禁止：

  • CSS transition / animation
  • Tailwind 的 animate-bounce、animate-pulse 等類名

原因：渲染器按幀截圖，不跑瀏覽器動畫時間線。

3.2 資源：放 public/，用 staticFile()

import { Img, staticFile } from "remotion";

<Img src={staticFile("logo.png")} style={{ width: 100, height: 100 }} />

視頻、音頻推薦 @remotion/media：

import { Video, Audio } from "@remotion/media";
import { staticFile } from "remotion";

<Video src={staticFile("clip.mp4")} />
<Audio src={staticFile("voice.mp3")} />

遠程 URL 也可直接作為 src，適合託管在 CDN 上的素材。

3.3 時間軸：用 Sequence 切片

import { Sequence, AbsoluteFill } from "remotion";

const Main = () => {
  const { fps } = useVideoConfig();

  return (
    <AbsoluteFill>
      <Sequence>
        <Background />
      </Sequence>
      <Sequence from={1 * fps} durationInFrames={2 * fps} layout="none">
        <Title />
      </Sequence>
      <Sequence from={2 * fps} durationInFrames={2 * fps} layout="none">
        <Subtitle />
      </Sequence>
    </AbsoluteFill>
  );
};

要點：

  • from：延遲出現（第幾幀開始）
  • durationInFrames：限制這一段長度
  • layout="none"：子元素不佔滿全屏時使用

3.4 Composition 元數據寫在 Root

寬高、fps、總幀數在 Root.tsx（或等價入口）聲明：

<Composition
  id="MyComposition"
  component={MyComposition}
  durationInFrames={100}
  fps={30}
  width={1080}
  height={1080}
/>

動態時長可用 calculateMetadata：例如先拉 API 拿視頻長度，再回填 durationInFrames——配音、自動剪輯場景必備。

3.5 預覽與抽檢

日常開發：

npx remotion studio

快速看某一幀佈局（30fps 下 --frame=30 約等於 1 秒處）：

npx remotion still MyComposition --scale=0.25 --frame=30

四、Skill 能帶你實現什麼（能力地圖）

主 Skill 是索引；具體實現細節在 rules/ 子文件。按場景對照：

你想做
加載子規則
能做的事
場景轉場、疊化、光斑
transitions.md
、light-leaks.md
TransitionSeries
 + fade/slide/wipe
可配置模板視頻
parameters.md
Zod schema → Studio 側邊欄改 props
多 composition 管理
compositions.md
Folder、Stills、defaultProps
字幕 / SRT
subtitles.md
、display-captions.md
導入字幕、跟讀高亮
AI 配音 + 自動時長
voiceover.md
ElevenLabs TTS + calculateMetadata
音頻可視化
audio-visualization.md
波形、頻譜、bass 反應
靜音檢測 / 裁剪
silence-detection.md
、trimming.md
FFmpeg 管線
3D 鏡頭
3d.md
Three.js / R3F
文字動畫
text-animations.md
打字機、逐詞高亮
透明通道導出
transparent-videos.md
WebM 等帶 alpha
地圖路線
maplibre.md
複雜飛線；簡單場景可用靜態圖
Lottie
lottie.md
與時間軸同步的矢量動畫
Google / 本地字體
google-fonts.md
、local-fonts.md
渲染時字體不丟
測字、防溢出
measuring-text.md
標題自適應容器
GIF 同步
gifs.md
GIF 跟幀播放
HTML 進 canvas
html-in-canvas.md
2D/WebGL 後處理

實踐建議： 先讓 AI 讀主 Skill，再點名子規則。例如「按 voiceover 規則給每段旁白生成 MP3 並拉長 composition」。

五、三條可落地的項目模板

模板 A：參數化社交短視頻

  1. npx create-video@latest --yes --blank --no-tailwind my-video
  2. 用 Zod 定義 title、accentColor、logoPath
  3. Sequence 編排 3 段：Logo 淡入 → 標題 → CTA
  4. Studio 裏改 props，批量 npx remotion render 出多版本

適合：品牌模板、日報數據視頻、多語言標題批量導出。

模板 B：解說視頻（配音驅動時長）

  1. 腳本按場景拆 JSON
  2. Node 腳本調 TTS（Skill 默認示例用 ElevenLabs）→ public/voice-*.mp3
  3. calculateMetadata 讀每段音頻時長，累加 durationInFrames
  4. 每段旁白對應一個 Sequence，畫面跟讀

適合：課程片段、產品說明、Newsletter 視頻版。

模板 C：數據回顧片（圖表 + 轉場）

  1. 數據 JSON 注入 props
  2. rules/assets/charts-bar-chart.tsx 等示例作參考
  3. TransitionSeries 切換章節
  4. 結尾 still 導出封面幀當公眾號配圖

適合：季度覆盤、GitHub Star 增長、產品指標週報。

六、和「自己啃文檔」怎麼配合

Skill 不會替代 Remotion 官方文檔，它補齊的是 AI 協作層：

  1. 減少反覆糾正：第一次就避開 CSS 動畫、路徑錯誤
  2. 子領域入口清晰：不用在 30 頁文檔裏搜「字幕」
  3. 腳手架命令現成：空文件夾直接 create-video

仍建議你自己掌握：

  • Remotion 渲染參數（codec、crf、併發）
  • 部署（Lambda / Cloud Run 等）——Skill 主文件不覆蓋運維
  • 複雜合成性能（大分辨率 + 3D 要實測）

七、常見踩坑清單

現象
多半原因
處理
導出全靜
用了 CSS 動畫
改 interpolate / spring
圖片 404
沒放 public/ 或沒用 staticFile
統一資源規範
音畫不同步
時長寫死，音頻更長
calculateMetadata
轉場後總時長不對
忘了 Transition 會重疊
讀 transitions.md 時長計算
字體方塊
未按規則加載字體
google-fonts
 / local-fonts
Tailwind 類無效
空白模板禁 Tailwind 動畫
用 inline style 或幀動畫

八、推薦工作流（給 AI 的口令模板）

把下面整段貼給 Cursor，效果通常比零散提問好：

加載 remotion-best-practices Skill。
目標：1080×1920，30fps，15 秒豎版片頭。
結構：0–2s Logo 淡入，2–5s 主標題 spring 入場，5–12s 三條賣點依次出現，12–15s CTA。
禁止 CSS transition。資源在 public/。
需要的話讀 transitions.md 做段間 fade。
完成後給 studio 預覽命令和 still 抽檢命令。

結語

Remotion 的門檻不在 React，而在時間思維：每一幀都是狀態快照。remotion-best-practices Skill 的價值，是把這套思維寫進 AI 的默認路徑裏——少改兩遍、少導出翻車。

如果你已經在用 Cursor 做視頻自動化，值得把它和 playwright、文檔類 Skill 並排放在工具欄。下一篇可以寫「配音驅動時長 + 自動字幕」的完整倉庫結構，需要的話可以留言。

參考

  • Remotion 官網：https://www.remotion.dev
  • Skill 主入口：remotion-best-practices/SKILL.md（用戶 agents skills 目錄）