爆火的 Remotion：年入百萬的 AI 視頻項目都在用它

作者：X-Prompt
日期：2026年1月30日 下午4:23
來源：WeChat 原文

✦整理版優先睇

速讀 5 個重點 高亮

Remotion係用React生成影片嘅開源框架，配合AI Coding可以快速製作影片，已有成功案例年收百萬美元。

整理版摘要

呢篇文章主要介紹Remotion呢個用React生成影片嘅開源框架，作者係想教讀者點樣本地部署Remotion，並用AI Coding工具（如Trae、Cursor）嚟創作影片。文章先講Remotion嘅應用場景，舉咗幾個成功項目，例如Submagic同Revid.ai，呢啲項目都係用Remotion做底層，年收入達到百萬美元。

之後詳細講解本地部署步驟，由檢查Node版本同ffmpeg開始，到用npx create-video創建專案，再揀Hello World模板，仲要記得選Skills。作者強調Skills好重要，因為AI編程工具要靠佢嚟讀取影片模板。

最後講點樣用AI創作影片，建議用CLI或者IDE直接打開Remotion項目，但係Trae呢類工具預設讀唔到Skills，要手動複製。整體結論係：Remotion結合AI Coding可以好快整到高質影片，技術門檻唔高，值得試。

  • Remotion係用React生成影片嘅開源框架，寫代碼就出片，適合配合AI Coding工具。
  • 多個AI影片項目（如Submagic、Revid.ai）年收百萬美元，都係以Remotion做底層。
  • 本地部署步驟簡單：確保安裝Node>=16同ffmpeg，再用npx create-video創建專案。
  • 安裝時必須選Skills，方便AI工具讀取模板；Trae等工具要手動複製Skills文件。
  • 用AI Coding工具（Trae、Cursor等）打開Remotion項目，即可透過自然語言生成影片。
整理重點

成功案例：年收百萬嘅AI影片項目

Remotion嘅應用場景好多，以下項目都係好例子：

  • Hackreels - 自動檢測代碼變化，生成動畫演示影片。
  • MyKaraoke Video - 上傳歌曲同歌詞，一鍵生成MV。
  • Submagic - AI短視頻編輯平台，目前年收入百萬美元。
  • Revid.ai - AI短視頻平台，15個月做到百萬美金。
整理重點

本地部署Remotion：小白都做到

首先確定電腦嘅Node版本大於16，用 <code>node -v</code> 檢查。

跟住檢查ffmpeg係咪裝咗，用 <code>which ffmpeg</code>；冇嘅就用 <code>brew install ffmpeg</code> 安裝。

  1. 1 用 <code>mkdir remotion</code> 創建文件夾，再 <code>cd remotion</code> 進入。
  2. 2 行 <code>npx create-video@latest my-video</code> 建立專案，建議加「my-video」會整齊啲。
  3. 3 見到歡迎畫面後，揀第二個Hello World模板，之後添加TailwindCSS揀Yes</highlight_indline>。
  4. 4 提示安裝Skills一定要揀Yes，因為呢個係俾AI讀取模板用。
  5. 5 用 <code>cd my-video</code> 進入目錄，行 <code>npm i</code> 安裝依賴，最後 <code>npm run dev</code> 啟動伺服器。

成功後點擊連結，就可以見到Hello World預覽，右下方有Render按鈕用嚟導出影片。

整理重點

用AI Coding工具創作影片

喺專案目錄開多個終端，用 <code>code .</code> 或者你鍾意嘅IDE（例如Trae、Cursor）直接打開。

但如果用Trae，佢預設讀唔到Remotion嘅Skills，要手動整：

  1. 1 喺專案入面用 <code>shift+cmd+.</code> 顯示隱藏文件。
  2. 2 見到.claude等文件夾，裏面有Skills文件。
  3. 3 自己創建.Trae文件夾，將.claude入面嘅Skills複製過去。
  4. 4 重新打開Trae，就會見到技能入面有安裝咗嘅Skills。

下面係用AI結合Remotion創作嘅影片範例，有興趣嘅話可以自己試下。

最近Remotion好紅。
咩係Remotion？
佢係一個用React嚟生成影片嘅開源框架。簡單講，你寫code，佢就輸出影片。
而家人人都喺度Ai Coding，所以你可以用Ai幫你整影片，完全可行。


01
Remotion 嘅應用場景

Remotion 嘅應用場景好多樣，又得意又實用。
下面展示一啲用Remotion嘅項目：
  • Hackreels - code變動畫。自動偵測code嘅變化，生成動畫演示影片。
  • MyKaraoke Video - 上傳歌曲同歌詞，一鍵生成歌曲MV。
圖片
  • Submagic - Ai短影片編輯、生成平台、自媒體內容自動化生產。而家呢個每年收入過百萬美金。
圖片
  • Revid.ai - Ai短影片平台，15個月就做到百萬美金。
圖片


02
點樣喺本地部署 Remotion？

點樣喺本地部署 Remotion？新手都可以輕鬆上手，超簡單。
首先你要確定你部電腦嘅node版本係咪大過16，用node -v呢個指令check。
node -v
圖片

仲要確定有冇裝ffmpeg，可以用which ffmpeg睇嚇，如果有路徑就表示已經裝咗。
which ffmpeg
圖片

如果冇，就用brew install ffmpeg指令裝佢。
brew install ffmpeg
圖片

確定好node同ffmpeg之後，我哋開一個folder嚟放remotion。用mkdir remotion開。
mkdir remotion
圖片

開好之後，轉去remotion裏面。
cd remotion
圖片

開始安裝，用npx create-video@latest my-video（建議喺後面加個my-video，咁樣睇起上嚟冇咁亂。）
npx create-video@latest my-video
圖片

當見到welcome to remotion，即係已經連線咗，之後可以揀官方提供嘅template，建議揀第二個Hello World。
圖片

揀好template之後，佢會問要唔要加TailwindCSS，揀Yes。
圖片

跟住問要唔要加skills，呢度一定要揀Yes，因為skills可以幫ai整影片時有更好嘅效果。
圖片

佢會話Enjoy！呢度就已經將個project pull咗落嚟。
圖片

不過唔使急住關個window，用cd指令入去my-video。用npm i初始化個project。
cd my-video
npm i
見到佢話加咗幾多個package，就表示已經裝好曬需要嘅package。
圖片

呢個時候我哋行npm run dev 啟動服務。見到有個URL link即係個project啟動成功。
npm run dev
圖片

㩒個link入去，見到Hello World project，之後我哋創建嘅影片都會喺呢度預覽，右邊下面嘅Render掣就係用嚟渲染匯出。
圖片

簡單欣賞嚇Hello World：


03
跟住點樣用Ai創作影片？

喺當前目錄（my-video）下面，再開一個終端機窗口，用CLI指令啟動你自己嘅編程軟件就得。
當然如果你唔鍾意用CLI，都可以用你熟嘅Ai coding IDE，例如Trae、Qoder等等，直接開呢個my-video project就得。
呢度補充嚇，假設你用緊Trae，咁我哋之前裝嘅Skills，Trae係讀唔到嘅。我哋可以手動複製去Trae嘅Skills folder就得。
首先喺my-video project入面，用shift+cmd+. 顯示隱藏嘅folder。
shift+cmd+.
圖片

可以見到remotion預設為claude、codex、cursor、gemini、opencode、windsurf呢幾個裝咗Skills，但係冇Trae、Qoder等。
呢個時候我哋只需要手動開一個.Trae嘅folder，注意前面有個 . 點。

圖片

然後隨便開一個有skills嘅folder，例如.claude，將入面嘅Skills folder複製去.Trae folder入面。
圖片

而家我哋開Trae，可以見到技能入面已經有咗裝咗嘅Skills。
圖片

最後展示一個用Ai結合Remotion創作嘅影片，有興趣嘅就去試嚇啦。

最近Remotion太火了。
什麼是Remotion？
它是一個用React生成視頻的開源框架。簡單來說你寫代碼,它輸出視頻。
現在人人都在Ai Coding，因此你用Ai幫你做視頻這事完全可行。


01
Remotion 的應用場景

Remotion 的應用場景豐富多樣，既有趣又實用。
下面展示一些使用Remotion的項目：
  • Hackreels - 代碼變動畫。自動檢測代碼變化，生成動畫演示視頻。
  • MyKaraoke Video - 上傳歌曲和歌詞，一鍵生成歌曲MV。
圖片
  • Submagic - Ai短視頻編輯、生成平台、自媒體內容自動化生產。目前這個年收入百萬美元。
圖片
  • Revid.ai - Ai短視頻平台，15個月做到百萬美金。
圖片


02
如何在本地部署 Remotion？

如何在本地部署 Remotion？小白也能上手超級簡單。
首先你需要確定你的電腦中node的版本是否大於16，使用node -v這個命令查看。
node -v
圖片

還需確定是否安裝了ffmpeg，可以使用which ffmpeg查看，如果有路徑則說明已經安裝了。
which ffmpeg
圖片

如果沒有，那麼使用brew install ffmpeg命令進行安裝。
brew install ffmpeg
圖片

確定好node和ffmpeg後，我們創建一個文件夾，用來存放remotion。使用mkdir remotion創建。
mkdir remotion
圖片

創建好，切換到remotion中。
cd remotion
圖片

開始安裝，使用npx create-video@latest my-video（建議在後面加入一個my-video，這樣看起來不會亂。）
npx create-video@latest my-video
圖片

當看到welcome to remotion時，說明已經連結上了，接下來可以選擇官方提供的模版，建議選擇第二個Hello World。
圖片

確定模版後，提示添加 TailwindCSS，選擇Yes。
圖片

提示添加skills，這裏一定要選Yes，因為skills可以幫助ai在創建視頻時有更好的效果。
圖片

提示Enjoy！這裏就已經將項目pull下來了。
圖片

但是，彆着急關閉窗口，使用cd命令進入到my-video中。使用npm i初始化項目。
cd my-video
npm i
看到提示添加了多少個包後，說明已經安裝好了需要的包。
圖片

這時我們運行npm run dev 啓動服務。看到網址連結了說明項目啓動成功了。
npm run dev
圖片

點擊連結進去，看到了Hello World項目，後面我們創建的視頻都在這裏預覽，右側下方的Render按鈕就是渲染導出用的。
圖片

淺淺欣賞一下Hello World：


03
接下來怎麼使用Ai創作視頻？

在當前目錄（my-video）下，再打開一個終端窗口，使用CLI命令啓動你自己的編程軟件就可以了。
當然如果你不喜歡使用CLI，也可以使用你熟悉的Ai coding的IDE，比如Trae、Qoder等等，直接打開這個my-video項目就行。
這裏補充一下，假設你使用的是Trae，那麼我們之前安裝的Skills，Trae是讀取不到的。我們可以手動複製到Trae的Skills文件內就行。
首先在my-video項目中，使用shift+cmd+. 顯示隱藏的文件夾。
shift+cmd+.
圖片

可以看到remotion默認為claude、codex、cursor、gemini、opencode、windsurf這幾個安裝了Skills，但是沒有Trae、Qoder等。
這時我們只需要手動創建一個.Trae的文件夾，注意前面有個 . 點。

圖片

然後隨便打開一個有skills的文件夾，比如.claude，將其中的Skills文件複製到.Trae文件夾中。
圖片

現在我們打開Trae，可以看到技能裏已經有了安裝的Skills。
圖片

最後展示一個用Ai結合Remotion創作的視頻，有興趣的去嘗試一下吧。