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

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

✦整理版優先睇

速讀 5 個重點 高亮

爆火嘅Remotion：用React寫代碼即可生成影片，年收入百萬嘅AI影片項目都用佢

整理版摘要

呢篇文章介紹咗一個叫Remotion嘅開源框架，佢嘅核心概念係用React去生成影片。作者想解決嘅問題係：點樣可以令AI自動幫你製作影片。整體結論係，Remotion結合AI Coding，完全可以做到自動化影片製作，而且已經有成功案例做到年收入百萬美元。

本地部署Remotion好簡單，只要電腦有Node.js同ffmpeg，跟住佢嘅步驟就可以快速建立一個Hello World項目。過程中可以選擇加入TailwindCSS同Skills，Skills係關鍵，因為佢可以幫AI喺創作影片時有更好嘅效果。

用AI創作影片嘅時候，可以用CLI或者IDE（例如Trae），但要留意IDE未必自動讀取到Skills，需要手動複製。文章最後展示咗一個用AI結合Remotion製作嘅影片，證明呢個方案完全可行。如果你識React，不妨嘗試一下。

  • Remotion係一個用React生成影片嘅開源框架，可以將代碼直接轉換成影片輸出。
  • 本地部署只需檢查Node.js同ffmpeg，透過npx create-video指令即可快速建立項目。
  • 成功案例包括Submagic同Revid.ai，呢啲項目年收入達到百萬美元級別。
  • 用AI創作影片時，可以選用Trae等IDE，但要手動複製Skills文件至對應目錄。
  • Remotion官方提供多個模板同內建Skills，降低創作門檻，適合開發者同內容創作者。
整理重點

什麼係Remotion？點解咁多人用？

Remotion係一個用React生成影片嘅開源框架。簡單講，你寫代碼，佢輸出影片。而家人人都在AI Coding，所以用AI幫你做影片完全可行。

用React生成影片嘅開源框架

以下係使用Remotion嘅成功項目：

Hackreels

MyKaraoke Video

Submagic（年收入百萬美元）

Revid.ai（15個月百萬美金）

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

本地部署Remotion：幾步就搞掂

首先確認電腦中Node版本大於16，可以使用 node -v 檢查；仲要確認ffmpeg已安裝，用 which ffmpeg 查看。

node -v

which ffmpeg

  1. 1 mkdir remotion 創建文件夾，cd remotion 切換入去。
  2. 2 執行 npx create-video@latest my-video，選擇官方模板（建議第二個Hello World）。
  3. 3 提示添加TailwindCSS，選擇Yes；提示添加skills，一定要選Yes。
  4. 4 cd my-video && npm i 安裝依賴，然後 npm run dev 啟動服務。

啟動成功後，可以喺瀏覽器預覽Hello World項目，右側嘅Render按鈕就係用嚟導出影片。

整理重點

點樣用AI創作影片？

喺當前目錄（my-video）下，再開一個終端窗口，用CLI命令啟動你嘅編程軟件就得。或者直接用AI Coding IDE（例如Trae、Qoder）打開呢個my-video項目。

AI Coding IDE

不過要注意，Trae呢類IDE默認讀取唔到Remotion安裝嘅Skills。需要手動複製Skills文件去對應目錄。

shift+cmd+.

  • Remotion默認支援Claude、Codex、Cursor、Gemini、OpenCode、Windsurf。
  • 如果要用Trae，就創建.Trae文件夾，複製skills過去。
  • 打開Trae，你就會見到技能入面已經有安裝好嘅Skills。

最後，展示一個用AI結合Remotion創作嘅影片，有興趣可以試嚇。

整理重點

Remotion嘅潛力：內容創作新時代

年收入百萬美元嘅案例證實呢個方向可行

如果你係開發者或者內容創作者，不妨試嚇用Remotion配合AI，可能會打開新嘅機會。

最近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 check，如果有路徑就表示已經裝咗。
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！呢度就已經將項目pull咗落嚟。
圖片

但係，唔好咁急閂咗個視窗，用cd指令進入my-video入面。用npm i初始化項目。
cd my-video
npm i
見到提示加咗幾多個package之後，就表示已經裝好咗需要嘅package。
圖片

呢個時候我哋行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 folder入面就得。
首先喺my-video項目入面，用shift+cmd+. 顯示隱藏嘅folder。
shift+cmd+.
圖片

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

圖片

然後隨便開一個有skills嘅folder，例如.claude，將入面嘅Skills file複製去.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創作的視頻，有興趣的去嘗試一下吧。