不想學剪輯？會React就能做視頻：Remotion從入門到跑通的保姆級教程

契機：

最近我又喺研究動畫同短片製作，但平時整短片揾各類素材真係好曬時間，成日用嘅剪輯工具都係傳統嘅剪映/PR/AE，於是我就由需求出發去揾好用嘅AI工具，結果俾我揾到一款叫Remotion嘅視頻生成自動化開源工具（對程序員整短片嚟講比較友好，因為佢係用React組件嚟寫視頻嘅）。

但係喺正式開始上手Remotion之前，都係希望大家花幾分鐘時間瞭解下Remotion係乜嘢、同傳統視頻剪輯工具有咩分別、邊啲人適合用、邊啲人唔適合用。

我依然本着唔傳播焦慮呢個出發點，因為如果覺得學習嘅投入產出唔成正比，建議後面第二部分嘅實操可以直接跳過，畢竟適合自己嘅先係最好嘅。

*內容比較多，我會分成兩篇，今期我哋會先由Remotion係乜嘢同新手點樣上手開始講，第二篇就會講點樣用Claude Code嚟Vibe Video。

由佢官網首頁我哋可以睇到呢款開源工具嘅定位好清晰（用編程方式製作視頻），再進一步解釋（用React生成真正嘅MP4視頻；可以動態配置內容、服務端渲染、做成視頻應用）同埋對應模板嘅快捷入口。

呢度我哋可以睇到有個「Find template」（揾模板），如下圖：

分為：

• Free templates（免費模板）：呢啲係你喺npx create-video@latest入面可以直接揀嘅免費模板，下文我哋會對呢啲模板做詳細解釋）；

• Paid templates（付費模板）：呢啲係需要俾錢買嘅高級模板。

簡單嚟講就係Remotion俾你準備好嘅「項目啓動菜單」。

Remotion係一個用代碼（React+TypeScript）嚟製作視頻嘅開源工具庫。佢將視頻當做前端組件嚟開發，通過編程方式控制畫面、動畫、文字、樣式同時間軸，最後渲染成MP4視頻。

簡單講：用寫網頁嘅方式，寫視頻。

• 高度自動化：數據、文案、樣式、邏輯全部可以寫入代碼，批量生成成千上萬個唔同視頻都唔需要手動改。

• 可重用、可維護：動畫、轉場、標題、Logo、字幕都可以整成組件，一次寫好，無限重用。改顏色、字體、佈局，只需要改代碼，唔使重新剪輯。

• 動態數據驅動：可以對接接口、數據庫、表格，自動將實時數據變成可視化視頻。例如：實時榜單、數據報告、數字滾動、大盤走勢視頻等。

• 團隊協作更高效：用Git管理版本，多人協作、review、回滾都好似開發項目咁規範。

• 適合大規模生產：傳統剪輯靠人力，Remotion靠程序，適合大量、標準化、高一致性嘅視頻產出。

3.1 創作方式

• 傳統剪輯：滑鼠拖曳、手動剪輯、可視化操作；

• Remotion：代碼編寫，組件化開發。

3.2 重用性

• 傳統剪輯：複製工程，手動改內容，容易亂；
  

• Remotion：組件化，一次封裝，無限重用。

3.3 批量能力

• 傳統剪輯：人工一個一個做，效率低；
  

• Remotion：循環、變量、腳本，一鍵批量生成成千條視頻。

3.4 數據對接

• 傳統剪輯：冇辦法直接讀取實時數據；
  

• Remotion：天然支持API、JSON、數據庫動態生成畫面。

3.5 修改成本

• 傳統剪輯：改風格/字體，要全部重新調整；
  

• Remotion：改一行代碼，全部生效。

3.6 協作方式

• 傳統剪輯：工程文件傳輸，版本混亂；
  

• Remotion：Git管理，多人協作、歷史版本清晰。

3.7 學習成本

• 傳統剪輯：學習剪輯、動畫、關鍵幀；
  

• Remotion：識React/前端就可以上手，唔使學剪輯軟件。

3.8 適用場景

• 傳統剪輯：創意短片、混剪、影視後期；

• Remotion：營銷視頻、數據視頻、自動化素材、動態海報、程序生成類視頻。

一句講曬

Remotion唔係用嚟取代剪映/PR/AE嘅，佢係用嚟取代嗰啲「重複、批量、規則化、數據驅動」嘅視頻生產工作。

傳統工具：人做視頻；Remotion：代碼做視頻。

• 需要批量生成視頻嘅團隊（廣告、短視頻、營銷素材）；

• 做數據可視化視頻、動態報表嘅開發者；

• 前端工程師想用代碼做動畫、視頻；

• 需要程序化、自動化視頻嘅業務；
  

• 追求風格統一、可迭代、可維護嘅視頻內容團隊。

5.1 完全唔識代碼、唔想掂代碼嘅人

• 唔識React、唔識前端、唔想寫命令行。
  

• 只想撳開軟件、拖素材、剪視頻。

Remotion本質係編程工具，唔係可視化剪輯軟件，冇拖曳界面。

5.2 只想快啲剪一條短片嘅人

• 日常發朋友圈、小紅書、抖音；
  

• 需求係：快、簡單、隨手剪用剪映、CapCut、Premiere 10分鐘搞掂嘅事。

Remotion可能要30分鐘到1個鐘。

5.3 做創意短片、劇情片、混剪、影視後期嘅人

• 需要大量：鏡頭剪輯、轉場、特效、濾鏡、調色、音效搭配；

• 追求藝術感、隨機性、手工質感；

• Remotion擅長規則、整齊、可重用，唔擅長自由創意剪輯。

5.4 冇批量/自動化需求嘅人

• 只做一條視頻，唔做幾十條、幾百條相似視頻；
  

• 唔需要數據驅動、唔需要動態更新內容。

Remotion嘅優勢完全發揮唔出嚟，屬於殺雞用牛刀。

5.5 電腦配置一般、唔想搞環境嘅人

• 唔想裝Node.js、npm、依賴包；
  

• 唔想處理報錯、版本衝突、啓動失敗等問題。

Remotion需要一套前端開發環境，比普通剪輯軟件麻煩。

5.6 追求「超多現成特效」嘅人

• 想要一鍵煙霧、火焰、光效、粒子、膠片感、熱門抖音特效；

• Remotion冇現成素材庫，所有效果都要自己寫代碼實現。

一句講曬：

Remotion唔適合：唔想寫代碼、只剪單條視頻、做創意藝術短片、追求快啲出片、鍾意現成特效嘅人。

適合Remotion嘅係：識前端/React、需要批量、自動化、數據驅動視頻、追求統一風格、可重用、可維護、要做數據可視化、動態海報、營銷模板視頻。

開源地址：

https://github.com/remotion-dev/remotion

文檔：

Node.js 16+（推薦Node 20 LTS）、npm或bun、一個代碼編輯器（VS Code推薦）、Claude Code（命令行工具）。

打開終端，複製貼上以下命令之後按回車：

作用

創建一個全新、可以直接運行嘅Remotion視頻項目。

佢會做啲乜？

生成完整項目結構、自動安裝依賴、自帶Remotion Studio、可以直接寫視頻、預覽、導出。

適合邊啲人？

第一次用Remotion、想由零開始做視頻。

你運行之後會得到

一個完整可以運行嘅Remotion項目。

如上圖所示，呢個係npx create-video@latest命令執行之後嘅模板選擇交互界面，Remotion提供咗多種預設模板，你可以用上下方向鍵（↑/↓）切換選項，按回車鍵（Return）確認選擇。

咁呢啲模板都係咩意思呢？如下圖所示：

*對新手嚟講，第一次學習、快速體驗：

建議選Hello World（TypeScript版），佢自帶簡單動畫，可以令你最快睇到Remotion效果，代碼亦最乾淨。

如果唔想用TypeScript：

揀Hello World (JavaScript)。

如果想做商業化項目：

再考慮Next.js系列或者其他SaaS模板。

操作步驟：

• 按↓鍵將滑鼠指標移到Hello World；

• 按回車鍵（Return）確認。

得到如下圖所示：

接下來會出現「Add agent skills？No / Yes」（如下圖），係問你係咪要為AI助手（例如Claude、Codeium）安裝Remotion專屬技能包？

Agent skills：係俾AI用嘅輔助工具，可以令AI更識Remotion語法、更準確生成代碼。

• 如果你而家係第一次學習Remotion，暫時用唔到AI輔助，咁揀No就夠啦；

• 如果揀Yes佢都只會安裝一個「AI輔助包」，令Claude/ChatGPT等AI更識Remotion，幫你寫代碼更準確啲。

（簡單嚟講就係：揀Yes：AI以後幫你寫代碼更聰明、更少錯；揀No：AI都仲用得，只係冇咁精準，但對你而家用Remotion完全冇任何分別）。

呢度我揀咗Yes之後，幫我俾AI都裝咗Remotion技能包（如下圖），我哋再揀「All detected agents（Recommended）”：

到如下圖所示，到呢度就代表已經成功創建咗項目：

喺終端輸入以下命令之後按回車：

再喺終端輸入以下命令之後按回車：

喺終端輸入以下命令之後按回車：

咁就會自動跳轉到以下界面：

下圖係Remotion Studio嘅渲染導出面板，用嚟將我哋寫好嘅代碼變成真正嘅視頻檔案。

可以喺「Input Props」進行參數配置/調整（輸入屬性或傳入參數，類似於對模板進行參數嘅配置，你唔需要去修改源碼文件，直接喺呢個面板改數值，視頻預覽就會實時變化）。

*最後撳「Render video」渲染導出，需要一段時間：

契機：

最近我又在研究一些動畫和短視頻的製作，但平時做短視頻找各類素材真的非常費時，常用的視頻剪輯工具還是傳統的剪映/PR/AE，於是我從需求導向出發去找好用的AI工具，被我挖到了一款叫Remotion的視頻生成自動化的開源工具（對程序員做短視頻比較友好，因為它是用React組件來寫視頻）。

但在正式開始上手Remotion前，還是希望大家花上幾分鐘先了解下Remotion是什麼、和傳統視頻剪輯工具有何不同以及誰適合用、誰不適合用。

我依舊本着不傳播焦慮作為出發點，因為如果覺得學習的投入產出不成正比，建議後面第二部分的實操部分可以直接略過，畢竟適合自己的才是最好的。

*內容較多，我會分成2篇，這期我們會先從Remotion是什麼以及新手如何上手開始，第二篇來講講如何使用Claude Code來Vibe Video。

從其官網首頁上我們可以看到這款開源工具的定位清晰（用編程的方式製作視頻）、進一步解釋（用React生成真正的MP4視頻；可以動態配置內容、服務端渲染、做成視頻應用）以及對應模版的快捷入口。

這裏我們可以看到有個“Find template”（找到模版），如下圖：

分為：

• Free templates（免費模板）：這些是你在npx create-video@latest裏能直接選的免費模板，下文我們會對這些模版做詳細解釋）；

• Paid templates（付費模板）：這些是需要購買的高級模板。

簡單來說就是Remotion給你準備的“項目啓動菜單”。

Remotion是一個用代碼（React+TypeScript）來製作視頻的開源工具庫。它把視頻當成前端組件來開發，通過編程方式控制畫面、動畫、文本、樣式和時間軸，最終渲染成MP4視頻。

簡單說：用寫網頁的方式，寫視頻。

• 高度自動化：數據、文案、樣式、邏輯全部可以寫進代碼，批量生成千萬個不同視頻都不用手動改。

• 可複用、可維護：動畫、轉場、標題、Logo、字幕都能做成組件，一次編寫，無限複用。改個顏色、字體、佈局，只需要改代碼，不用重新剪輯。

• 動態數據驅動：可以對接接口、數據庫、表格，自動把實時數據變成可視化視頻。比如：實時榜單、數據報告、數字滾動、大盤走勢視頻等。

• 團隊協作更高效：用Git管理版本，多人協作、review、回滾都像開發項目一樣規範。

• 適合規模化生產：傳統剪輯靠人力，Remotion靠程序，適合大量、標準化、高一致性的視頻產出。

3.1 創作方式

• 傳統剪輯：鼠標拖拽、手動剪輯、可視化操作；

• Remotion：代碼編寫，組件化開發。

3.2 複用性

• 傳統剪輯：複製工程，手動改內容，容易亂；
  

• Remotion：組件化，一次封裝，無限複用。

3.3 批量能力

• 傳統剪輯：人工一個個做，效率低；
  

• Remotion：循環、變量、腳本，一鍵批量生成千條視頻。

3.4 數據對接

• 傳統剪輯：無法直接讀取實時數據；
  

• Remotion：天然支持API、JSON、數據庫動態生成畫面。

3.5 修改成本

• 傳統剪輯：改風格/字體，要全量重新調整；
  

• Remotion：改一行代碼，全局生效。

3.6 協作方式

• 傳統剪輯：工程文件傳輸，版本混亂；
  

• Remotion：Git管理，多人協作、歷史版本清晰。

3.7 學習成本

• 傳統剪輯：學習剪輯、動畫、關鍵幀；
  

• Remotion：會React/前端即可上手，不用學剪輯軟件。

3.8 適用場景

• 傳統剪輯：創意短片、混剪、影視後期；

• Remotion：營銷視頻、數據視頻、自動化素材、動態海報、程序生成類視頻。

一句話總結

Remotion不是用來取代剪映/PR/AE的，它是用來替代那些“重複、批量、規則化、數據驅動”的視頻生產工作。

傳統工具：人做視頻；Remotion：代碼做視頻。

• 需要批量生成視頻的團隊（廣告、短視頻、營銷素材）；

• 做數據可視化視頻、動態報表的開發者；

• 前端工程師想用代碼做動畫、視頻；

• 需要程序化、自動化視頻的業務；
  

• 追求風格統一、可迭代、可維護的視頻內容團隊。

5.1 完全不懂代碼、不想碰代碼的人

• 不會React、不會前端、不想寫命令行。
  

• 只想點開軟件、拖素材、剪視頻。

Remotion本質是編程工具，不是可視化剪輯軟件，沒有拖拽界面。

5.2 只想快速剪一條短視頻的人

• 日常發朋友圈、小紅書、抖音;
  

• 需求是：快、簡單、隨手剪用剪映、CapCut、Premiere 10分鐘搞定的事。

Remotion可能要30分鐘-1小時。

5.3 做創意短片、劇情片、混剪、影視後期的人

• 需要大量：鏡頭剪輯、轉場、特效、濾鏡、調色、音效搭配；

• 追求藝術感、隨機性、手工質感；

• Remotion擅長規則、整齊、可複用，不擅長自由創意剪輯。

5.4 沒有批量/自動化需求的人

• 只做一條視頻，不做幾十條、幾百條相似視頻；
  

• 不需要數據驅動、不需要動態更新內容。

Remotion的優勢完全發揮不出來，屬於殺雞用牛刀。

5.5 電腦配置一般、不想折騰環境的人

• 不想裝Node.js、npm、依賴包；
  

• 不想處理報錯、版本衝突、啓動失敗等問題。

Remotion需要一套前端開發環境，比普通剪輯軟件麻煩。

5.6 追求“超多現成特效”的人

• 想要一鍵煙霧、火焰、光效、粒子、膠片感、熱門抖音特效；

• Remotion沒有現成素材庫，所有效果都要自己寫代碼實現。

一句話總結：

Remotion不適合：不想寫代碼、只剪單條視頻、做創意藝術短片、追求快速出片、喜歡現成特效的人。

適合Remotion的是：會前端/React、需要批量、自動化、數據驅動視頻、追求統一風格、可複用、可維護、要做數據可視化、動態海報、營銷模板視頻。

開源地址：

https://github.com/remotion-dev/remotion

文檔：

Node.js 16+（推薦Node 20 LTS）、npm或bun、一個代碼編輯器（VS Code推薦）、Claude Code（命令行工具）。

打開終端，複製粘貼以下命令後按回車：

作用

創建一個全新、可直接運行的Remotion視頻項目。

它會做什麼？

生成完整項目結構、自動安裝依賴、自帶Remotion Studio、可以直接寫視頻、預覽、導出。

適合誰？

第一次用Remotion、想從零開始做視頻。

你運行後得到

一個完整可運行的Remotion項目。

由上圖所示，這是npx create-video@latest命令執行後的模板選擇交互界面，Remotion提供了多種預設模板，你可以用上下方向鍵（↑/↓）切換選項，按回車鍵（Return）確認選擇。

那這些模版都什麼意思呢？如下圖所示：

*對新手來說，第一次學習、快速體驗：

建議選Hello World（TypeScript版），它自帶簡單動畫，能讓你最快看到Remotion效果，代碼也最乾淨。

如果不想用TypeScript：

選Hello World (JavaScript)。

如果想做商業化項目：

再考慮Next.js系列或其他SaaS模板。

操作步驟：

• 按↓鍵把光標移到Hello World；

• 按回車鍵（Return）確認。

得到如下圖所示：

接下來會出現“Add agent skills？No / Yes”（如下圖），是在問你是否要為AI助手（比如Claude、Codeium）安裝Remotion專屬技能包？

Agent skills：是給AI用的輔助工具，能讓AI更懂Remotion語法、更準確生成代碼。

• 如果你現在是第一次學習Remotion，暫時用不到AI輔助，那麼選No就夠了；

• 如果選Yes它也只會安裝一個“AI輔助包”，讓Claude/ChatGPT等AI更懂Remotion，幫你寫代碼更準確些。

（簡單來說就是：選Yes：AI以後幫你寫代碼更聰明、更少錯；選No：AI還是能用，只是沒那麼精準，而對你現在使用Remotion完全沒有任何區別）。

這裏我選擇Yes後，幫我給AI都裝上了Remotion技能包（如下圖），我們再選擇“All detected agents（Recommended）”：

到如下圖所示，至此就代表已成功創建項目：

在終端輸入以下命令後按回車：

再終端輸入以下命令後按回車：

在終端輸入以下命令後按回車：

於是會自動跳轉到以下界面：

下圖是Remotion Studio的渲染導出面板，用來把我們寫好的代碼變成真正的視頻文件的。

可以在“Input Props”進行參數配置/調整（輸入屬性或傳入參數，類似於對模版進行參數的配置，你不需要去修改源碼文件，直接在這個面板改數值，視頻預覽就會實時變化）。

*最後點“Render video”渲染導出，需要一段時間：