我用Remotion做了5個視頻，用代碼生成視頻
整理版優先睇
作者用Remotion製作5個視頻，展示用React代碼生成動畫、數據可視化等效果，強調程序化視頻製作嘅核心優勢。
作者最近做產品項目時接觸到開源視頻生成工具Remotion，為咗展示佢嘅核心能力，親手做咗五個案例視頻。佢用Manus（一個AI agent）配合Remotion，將視頻要求同數據俾佢就生成到。
五個案例包括文字動畫秀、產品展示、數據可視化、代碼演示同AI大事件回顧，每個案例突出唔同能力。文字動畫秀展示彈跳飛入、打字機效果等；數據可視化示範數字增長動畫同柱狀圖；AI大事件回顧長達120秒，涵蓋8個章節，畫面精緻。
Remotion嘅核心理念係用React代碼寫視頻，每一幀都係React組件，動畫由CSS同JavaScript控制。數據同視頻完全分離，修改數據即可重新渲染。佢嘅優勢包括程序化控制、可複用、靈活、易維護同高質量輸出，特別適合需要批量生成、數據驅動嘅場景。
- Remotion以React組件定義視頻每一幀，動畫由CSS同JavaScript控制，數據同視頻完全分離。
- 五個案例展示咗文字動畫、產品推廣、數據可視化、代碼演示、長篇回顧等場景，證明Remotion嘅靈活性。
- 核心優勢包括程序化控制、組件化複用、超靈活、易維護（Git管理）同高質量輸出（支援4K）。
- 對比傳統視頻編輯軟件，Remotion特別適合需要批量生成、數據驅動、程序化控制嘅用戶，例如程序員、數據分析師同內容創作者。
- 作者通過實際案例證明，用代碼寫視頻可以精確控制每一幀，修改數據即可重新渲染，大幅提升效率。
Remotion官網
官方網站，提供框架介紹、文檔同示範。
GitHub倉庫
Remotion開源項目嘅源碼同貢獻指南。
官方文檔
詳細嘅API文檔同使用教學。
示例項目
官方展示頁，有大量案例可以參考。
背景與動機
作者最近做產品項目時接觸到開源視頻生成工具Remotion，為咗展示佢嘅核心能力，親手整咗五個案例視頻。佢用Manus配合Remotion，將視頻要求同數據俾佢就自動生成到。
用 React 代碼編寫視頻
呢個概念好革新：視頻嘅每一幀都係一個React組件，動畫效果用CSS同JavaScript控制，仲可以用Git管理。
用 Git 管理視頻項目
五個案例逐個睇
作者分享咗五個案例，每個都突出唔同嘅Remotion能力：
- 1 文字動畫秀（15秒）：展示彈跳飛入、打字機效果、旋轉彈出同發光效果，音效同步。
- 2 產品展示視頻（20秒）：模擬產品推廣，包括圖片滑入、賣點卡片、價格增長動畫同CTA按鈕光暈。
- 3 數據可視化（18秒）：數字增長動畫、柱狀圖、進度環動畫，數據同視頻完全分離，修改數據即重新渲染。
- 4 代碼演示（15秒）：Terminal打字機效果，光標閃爍，輸出逐行顯示，適合技術教程。
- 5 AI大事件回顧（120秒）：8個章節回顧2025-2026年AI大事，包括DeepSeek、美國星際之門等，畫面精緻，動效驚豔。
精確控制每一幀
數據驅動視頻內容
Remotion嘅核心優勢
Remotion有五大優勢，令佢喺視頻製作工具中脱穎而出：
- 程序化：所有動畫都用代碼編寫，可以精確控制每一幀，唔再依賴鼠標拖拽。
- 可複用：組件化設計，動畫邏輯可以輕鬆複用，寫一次用無數次。
- 超靈活：從文字動畫到數據可視化，從15秒短片到120秒長片，乜效果都得。
- 易維護：代碼即視頻，用Git管理，團隊協作就似開發網頁咁簡單。
- 高質量輸出：Full HD甚至4K，支援多種編碼格式，滿足各種平台。
程序化控制
組件化設計
超靈活
易維護
高質量輸出
適用場景與資源
Remotion特別適合：程序員（識React就做到）、數據分析師（用數據驅動視頻）、內容創作者（批量生成相似視頻）、產品經理（快速製作演示）同教育工作者（製作教學動畫）。
批量生成
數據驅動
作者提到相關資源包括官網、GitHub、文檔同示例項目，有興趣可以參考。
相關資源
最近喺度做緊一個產品項目嘅時候，接觸到呢個開源視頻生成工具。
然後我為咗向大家展示佢嘅核心能力，整咗五個案例視頻。
咁大家可能會諗到幾時可以用佢嚟整片。
用編程工具或者一啲agent都得，我呢個係喺manus裏面整嘅。
同佢講用remotion框架整片，你將視頻嘅要求同數據畀佢就得。
官網都有唔少案例：
下面睇下素人我整嘅一啲案例：
Remotion：用代碼整片
Remotion 係一個革命性嘅視頻製作框架，佢嘅核心理念係：用 React 代碼整片。
冇錯，就係你平時用嚟寫網頁嗰個 React。
想像一下：
影片嘅每一格都係一個 React 組件 動畫效果用 CSS 同 JavaScript 控制 數據驅動影片內容 用 Git 管理影片項目 團隊協作就好似開發網頁咁簡單
聽落好型？等我透過五個實際案例嚟展示 Remotion 可以做啲乜。
我整嘅五條片案例
案例一：文字動畫秀（15秒）
片：01-文字動畫.mp4
呢個係我整嘅第一個視頻，用嚟展示豐富嘅文字動畫效果：
- 彈跳飛入
：標題由下面飛入，帶物理彈跳效果 - 打字機效果
：副標題逐字顯示，配合遊標閃爍 - 旋轉彈出
：三個關鍵詞依次彈出並旋轉360度 - 發光效果
：全局放大併發光，營造高潮感覺 - 音效同步
：每個動畫都配合精準嘅音效
案例二：產品展示視頻（20秒）
片：02-產品展示.mp4
呢條片模擬咗真實嘅產品推廣場景：
- 產品圖片滑入
：由左邊滑入並放大 - 賣點卡片展示
：三個賣點依次由右邊滑入 - 價格增長動畫
：由0滾動到999 - 優惠標籤閃爍
：吸引注意力 - CTA按鈕
：帶呼吸光暈效果
案例三：數據可視化（18秒）
片：03-數據可視化.mp4
呢條片展示咗專業嘅數據可視化能力：
- 數字增長動畫
：三個關鍵指標同時增長，帶緩動效果 - 柱狀圖
：由底部增長到唔同高度 - 進度環
：SVG 路徑動畫，由0%到85% - 慶祝效果
：背景漸變色變化，營造氣氛
數據驅動影片
最強大嘅地方在於：數據同影片完全分離。
const data = { sales: 1000000, orders: 5420, customers: 3280, };
改數據，重新渲染，就係一個全新嘅影片。
案例四：代碼演示（15秒）
片：04-代碼演示.mp4
呢條片展示咗 Terminal 命令演示：
- 打字機效果
：命令逐字輸入 - 遊標閃爍
：模擬真實終端 - 輸出逐行顯示
：安裝過程可視化 - 打字音效
：每個字符輸入都有音效
技術教程嘅最佳拍檔
如果你做技術教程，Remotion 可以幫你：
• 自動生成代碼演示影片
• 精確控制每一格嘅內容
• 輕鬆修改同更新
• 保持視覺風格統一
案例五：AI大事件回顧（120秒）
片：AI狂飆的一年-2025-2026全球AI大事件.mp4
呢個係從片本身效果嚟睇，唔錯嘅，120秒嘅AI大事件回顧片，包含8個精彩章節，唯一欠缺嘅係內容仲未夠全面：
開場（8秒）：標題爆炸式展開，地球旋轉特效
第一章：中國突圍（12秒）：DeepSeek 600萬美元成本革命
第二章：美國反擊（20秒）：5000億美元三大計劃
第三章：全球競賽（25秒）：歐盟、日本、韓國、中東佈局
第四章：里程碑時刻（15秒）：ChatGPT 10億用戶
第五章：AI投資狂潮（15秒）：2.52萬億美元投資
第六章：未來展望（15秒）：AI Agent、開源、安全
結尾（10秒）：關鍵詞雲總結
片嘅亮點
1. 內容全面
DeepSeek 600萬美元訓練成本，媲美OpenAI o1 美國星際之門計劃：5000億美元 ChatGPT突破10億用戶（2025年7月） 中國算力平台貫通：1085萬架標準機架 2026年全球AI投資預測：2.52萬億美元
2. 畫面精緻
8個章節獨立設計，每個都有獨特嘅主題色 科技感配色方案（深藍、科技藍、中國紅、金色） AI生成嘅精美圖片（地球、Logo、數據中心、火箭） 流暢嘅過渡動畫
3. 動效驚豔
數字滾動增長動畫（由0到600萬、10億、2.52萬億） 卡片旋轉飛入特效 粒子系統同光效 SVG曲線繪製（用戶增長曲線） 3D旋轉效果（地球、AI大腦）
Remotion 嘅五大核心優勢
1. 程序化
所有動畫都用代碼編寫，可以精確控制每一格。唔再依賴滑鼠拖拽，一切都在你嘅掌控之中。
2. 可複用
組件化設計，動畫邏輯可以輕鬆複用。寫一次，用無數次。
3. 超靈活
從文字動畫到數據可視化，從產品展示到代碼演示，由15秒短片到120秒長片，Remotion 可以實現任何你想要嘅片效果。
4. 易維護
代碼即片，使用 Git 管理，團隊協作就好似開發網頁咁簡單。
5. 高質量
輸出 Full HD 甚至 4K 片，支持多種編碼格式，滿足各種平台需求。
適合邊個用？
Remotion 特別適合：
- 程序員
：識 React 就可以整片 - 數據分析師
：用數據驅動片生成 - 內容創作者
：批量生成類似片 - 產品經理
：快速製作產品演示 - 教育工作者
：製作教學動畫
但係對於需要批量生成、數據驅動、程序化控制嘅場景，Remotion 係無可替代嘅。
相關資源
- Remotion 官網
：https://www.remotion.dev/ - GitHub 倉庫
：https://github.com/remotion-dev/remotion - 官方文檔
：https://www.remotion.dev/docs/ - 示例項目
：https://www.remotion.dev/showcase
最近在做一個產品項目的時候，接觸到這個開源視頻生成工具。
然後我為了給大家展示它的核心能力，我做了五個案例視頻。
這樣大家也許會有些靈感什麼時候可以用它來做視頻。
用編程工具或者一些agent都能做，我這個是在manus裏面做的。
告訴它說用remotion框架製作視頻，你把視頻的要求和數據給到即可。
官網也有不少案例：
下面看看素人我做的一些案例：
Remotion：用代碼寫視頻
Remotion 是一個革命性的視頻製作框架，它的核心理念是：用 React 代碼編寫視頻。
沒錯，就是那個你用來寫網頁的 React。
想象一下：
視頻的每一幀都是一個 React 組件 動畫效果用 CSS 和 JavaScript 控制 數據驅動視頻內容 使用 Git 管理視頻項目 團隊協作就像開發網頁一樣簡單
聽起來很酷？讓我通過五個實際案例來展示 Remotion 能做什麼。
我做的五個視頻案例
案例一：文字動畫秀（15秒）
視頻：01-文字動畫.mp4
這是我做的第一個視頻，用來展示豐富的文字動畫效果：
- 彈跳飛入
：標題從下方飛入，帶物理彈跳效果 - 打字機效果
：副標題逐字顯示，配合光標閃爍 - 旋轉彈出
：三個關鍵詞依次彈出並旋轉360度 - 發光效果
：全局放大併發光，營造高潮感 - 音效同步
：每個動畫都配合精準的音效
案例二：產品展示視頻（20秒）
視頻：02-產品展示.mp4
這個視頻模擬了真實的產品推廣場景：
- 產品圖片滑入
：從左側滑入並放大 - 賣點卡片展示
：三個賣點依次從右側滑入 - 價格增長動畫
：從0滾動到999 - 優惠標籤閃爍
：吸引注意力 - CTA按鈕
：帶呼吸光暈效果
案例三：數據可視化（18秒）
視頻：03-數據可視化.mp4
這個視頻展示了專業的數據可視化能力：
- 數字增長動畫
：三個關鍵指標同時增長，帶緩動效果 - 柱狀圖
：從底部增長到不同高度 - 進度環
：SVG 路徑動畫，從0%到85% - 慶祝效果
：背景漸變色變化，營造氛圍
數據驅動視頻
最強大的地方在於：數據和視頻完全分離。
const data = { sales: 1000000, orders: 5420, customers: 3280, };
修改數據，重新渲染，就是一個全新的視頻。
案例四：代碼演示（15秒）
視頻：04-代碼演示.mp4
這個視頻展示了 Terminal 命令演示：
- 打字機效果
：命令逐字輸入 - 光標閃爍
：模擬真實終端 - 輸出逐行顯示
：安裝過程可視化 - 打字音效
：每個字符輸入都有音效
技術教程的最佳伴侶
如果你做技術教程，Remotion 可以幫你：
• 自動生成代碼演示視頻
• 精確控制每一幀的內容
• 輕鬆修改和更新
• 保持視覺風格統一
案例五：AI大事件回顧（120秒）
視頻：AI狂飆的一年-2025-2026全球AI大事件.mp4
這是從視頻本身效果來看，不錯的，120秒的AI大事件回顧視頻，包含8個精彩章節，唯一欠缺的是內容還不夠全面：
開場（8秒）：標題爆炸式展開，地球旋轉特效
第一章：中國突圍（12秒）：DeepSeek 600萬美元成本革命
第二章：美國反擊（20秒）：5000億美元三大計劃
第三章：全球競賽（25秒）：歐盟、日本、韓國、中東佈局
第四章：里程碑時刻（15秒）：ChatGPT 10億用戶
第五章：AI投資狂潮（15秒）：2.52萬億美元投資
第六章：未來展望（15秒）：AI Agent、開源、安全
結尾（10秒）：關鍵詞雲總結
視頻亮點
1. 內容全面
DeepSeek 600萬美元訓練成本，媲美OpenAI o1 美國星際之門計劃：5000億美元 ChatGPT突破10億用戶（2025年7月） 中國算力平台貫通：1085萬架標準機架 2026年全球AI投資預測：2.52萬億美元
2. 畫面精緻
8個章節獨立設計，每個都有獨特的主題色 科技感配色方案（深藍、科技藍、中國紅、金色） AI生成的精美圖片（地球、Logo、數據中心、火箭） 流暢的過渡動畫
3. 動效驚豔
數字滾動增長動畫（從0到600萬、10億、2.52萬億） 卡片旋轉飛入特效 粒子系統和光效 SVG曲線繪製（用戶增長曲線） 3D旋轉效果（地球、AI大腦）
Remotion 的五大核心優勢
1. 程序化
所有動畫都是用代碼編寫，可以精確控制每一幀。不再依賴鼠標拖拽，一切都在你的掌控之中。
2. 可複用
組件化設計，動畫邏輯可以輕鬆複用。寫一次，用無數次。
3. 超靈活
從文字動畫到數據可視化，從產品展示到代碼演示，從15秒短視頻到120秒長視頻，Remotion 可以實現任何你想要的視頻效果。
4. 易維護
代碼即視頻，使用 Git 管理，團隊協作就像開發網頁一樣簡單。
5. 高質量
輸出 Full HD 甚至 4K 視頻，支持多種編碼格式，滿足各種平台需求。
適合誰使用？
Remotion 特別適合：
- 程序員
：會 React 就能做視頻 - 數據分析師
：用數據驅動視頻生成 - 內容創作者
：批量生成相似視頻 - 產品經理
：快速製作產品演示 - 教育工作者
：製作教學動畫
但對於需要批量生成、數據驅動、程序化控制的場景，Remotion 是無可替代的。
相關資源
- Remotion 官網
：https://www.remotion.dev/ - GitHub 倉庫
：https://github.com/remotion-dev/remotion - 官方文檔
：https://www.remotion.dev/docs/ - 示例項目
：https://www.remotion.dev/showcase