Remotion 從一人 side project 變成 npm 日下載 80 萬：Syntax 訪 Jonny Burger 拆解程式碼造影片的下一步

TL;DR

• Remotion 是用 React 程式碼產生影片的框架，從 2021 年瑞士蘇黎世一個人寫到現在三人團隊，光靠 license 條款養活自己
• 今年一月發了 Claude skill，八週內衝到 skills.sh 第五名，npm 日下載量從 12.5 萬跳到接近 80 萬，非技術人也能 prompt 出像樣的影片
• OpenAI 那支 Codex 發表影片、Claude 的產品 launch 影片，背後都是 Remotion
• 真正的瓶頸是 prompt 跟手動編輯之間還沒接好，Jonny 正在做能跟 agent 平行操作的 fast refresh
• Chrome 實驗中的 HTML in Canvas 規格可能會改寫瀏覽器做影片特效的方式，把 vignette、blur、shader 直接套在 DOM 上
• Web Codecs 在 2026 年終於全瀏覽器到位，搭配 Media Bunny 函式庫可以在瀏覽器裡直接讀寫 MP4 binary
• 商業模式很硬：四人以上的公司強制付費，這條紅線換來開源能持續四五年不被燒乾

Syntax.fm 是 Wes Bos 跟 Scott Tolinski 主持的前端老 podcast，從 ES6 講到 React 講到現在的 AI coding agent，是英語前端社群最大的訊息源之一。這集 1005 在 2026 年 5 月 18 日上線，Wes 找了 Jonny Burger 第二次上節目。Jonny 來自瑞士蘇黎世，是 Remotion 的創辦人，從 2021 年開始一個人寫，到現在 GitHub 已經 2.8 萬顆星、月下載破 40 萬。Remotion 的概念簡單講就是「把網頁加上時間維度」，每一幀都是一個 React 元件 render 出來的畫面，最後用 ffmpeg 接起來變 MP4。聽起來像 toy project，但今年初突然變成 AI 圈非技術人最愛的影片工具。

一個 Claude skill 把六年積累一次釋放

Jonny 在 podcast 裡講了一個我覺得很有畫面感的數字：Remotion 的 npm 日下載量去年十一月、十二月還在 12.5 萬，今年某天醒來變成接近 80 萬。中間發生什麼事？他在推特上發了一條推文，說現在可以透過 agent skill 操作 Remotion，配上一個 npx skills 指令當作 skill 的套件管理器，這條推文炸開了。Anthropic 自己統計，Remotion 的 Claude Code skill 上線八週就衝到 skills.sh 第五名，是非平台廠商的第一名。

對我自己來說，這件事的意義不只是「又一個 viral 工具」。我之前在AI Coding 時代：軟體產品開發變成咒術迴戰寫過 vibe coding 跟 DeFi summer 的相似性，現在 Remotion 跟 Claude skill 的組合就是這個 pattern 的具體例子：技術門檻被一個指令打掉之後，整個受眾結構在一夜之間翻轉。Jonny 自己說，現在用 Remotion 的人多半已經不再是工程師，是行銷、是內容創作者、是想做產品發表動畫的小公司老闆。他們給 Claude 一個很模糊的 prompt，剩下的事情 AI 幫他們補完。

最讓我印象深刻的例子是 OpenAI 從官方帳號發的 Codex 發表影片，整支動畫就是 Remotion 生成的，連那個工程師都公開承認。Claude 自己那些超酷的產品 launch 影片，雖然 Anthropic 那邊的人不肯講細節，但 Wes 在推特問「這誰做的」，下面留言一面倒「老兄就是 prompt Remotion」。

四人公司付費這條紅線，把開源拉得長

Jonny 對開源永續的看法蠻硬的。他在 license 裡寫了一條：四人以上的公司必須付費，其他人全部免費。我認為這條紅線比大部分 SaaS 的訂閱模型都聰明，因為它把「有能力付的人」跟「真的需要免費的人」自然分開。

他的判斷是這樣：如果一家公司已經養得起四個人，那它一定也付得起 Remotion 的小額授權費，這個門檻不算苛刻。對個人開發者、學生、indie hacker 來說，Remotion 永遠是免費的，這層完整保留了開源精神。結果三人團隊（Jonny 加兩個同事）在公開 GitHub repo 的狀態下養活自己，不用做 VC 路線、不用追使用者數、不用做免費仔的 funnel optimization。

Jonny 在訪談裡有句話我特別贊同：「在你開源之前，先想好怎麼讓自己不被 issue 跟 bug report 燒乾。」這件事在台灣的開源社群很少有人講。多數人開了 repo 之後就被精神內耗淹沒，做兩年消失，這條 license 等於是他給自己未來的保險。

Prompt 跟剪輯之間，還缺一個 fast refresh

我覺得這集最有料的部分，是 Jonny 在講 prompt 到完成片之間那段尷尬的縫隙。Claude 可以幫你寫好初版的影片程式碼，但你後面想做微調，比如把 blur 強度從 0.3 改成 0.5、把某個元件往右移 20 像素，這時候你會發現三個介面在搶你的注意力：直接改 code、prompt agent 改、或者打開 Remotion Studio 用拉桿微調。

他現在在解的問題是：當 UI 改了一個值之後，怎麼把這個值寫回原始 code，同時還不要打斷 agent 正在進行的修改。技術細節聽起來蠻黑魔法的，JavaScript proxies 加上 source maps 反查 React 元件的位置，再用 abstract syntax tree（抽象語法樹）改寫 props，但這套流程下 fast refresh 會有 200 毫秒延遲，使用者體驗還是卡。他現在在試的方向是「繞過 bundler 直接 hot update」，這樣 agent 寫程式碼跟人類拉拉桿可以同時發生不互相打架。

這段對我來說有實際感觸。我之前在做部落格自動化 Pipeline的時候，遇到一模一樣的問題：Claude 自動產的草稿、Admin UI 編輯器、跟 Markdown 原始檔三者之間的同步狀態。最後我妥協了，讓編輯器當 source of truth，agent 只在指定時點寫入。Jonny 想做的是更難的版本，code 永遠是 source of truth，但人跟 agent 可以同時改。這個問題如果他解出來，整個 vibe coding 的工作流會再上一個台階。

HTML in Canvas：把瀏覽器變成特效引擎

接下來這段聽完我蠻興奮的。Chrome 在實驗一個叫 HTML in Canvas 的新規格，現在只能在 Chrome Canary 加 feature flag 開啟，還沒到 stage 0。它做的事情是：你可以把 DOM 內容塞進 <canvas> 元素裡，然後在 canvas 層套用任何 shader 或特效。

聽起來不大，但 Jonny 的反應是「我感覺像回到第一天」。為什麼？傳統上瀏覽器的 canvas 跟 DOM 是兩個世界。DOM 可以用 CSS 排版、做 grid、做 flex，一行 CSS 解決一堆事情，但你沒辦法在 DOM 上面套 vignette、progressive blur 這些影片剪輯軟體常見的特效。Canvas 可以套特效，但 canvas 裡的東西沒辦法用 CSS 排版。HTML in Canvas 把這道牆拆掉了。

實際意義是：你可以用 HTML + CSS 把所有內容排好，包括 input、dropdown、可以選取的文字都還能正常互動，然後在外層套一個 canvas，加上 grunge、grain、blur、shine 這些電影感的處理。Wes 在訪談裡有個畫面感很強的例子：他用 3D shader 給自己影片的文字加上頹廢風 blur 跟雜訊，效果好到他想用在所有未來影片上。

當然這個 API 還有限制。最大的是不能 nest，你沒辦法在外層套 vignette 同時在內層加 shine。也不能塞 iframe（合理，估計是 security 考量）。但 Jonny 的態度是「就算 API 之後可能整個改、甚至被砍掉，我也不會讓它影響我現在的興奮感」。

這個 spec 如果穩定下來，瀏覽器就正式變成影片剪輯軟體的 runtime 環境。Lottie 跟 After Effects 那種封閉檔案格式的優勢會被吃掉一大塊，因為你用 HTML 不只能畫東西，還能加 logic、加 if-else、加資料 fetching。

Web Codecs 跟 Media Bunny：瀏覽器讀寫 MP4 binary 終於不卡了

第二個技術轉變更具體一點。Web Codecs 是個比 HTML in Canvas 成熟的規格，2026 年所有主流瀏覽器都支援了。它讓你可以直接在 JavaScript 裡讀寫 H.264、H.265 這種編碼過的 video chunk，繞過 <video> 標籤的所有限制。

傳統做法你要從影片裡抓一個 frame，要 mount 一個 <video> 元素、seek 到對應時間、截圖，這個流程不僅不精準，而且 mount 太多 video 元素瀏覽器會主動 throttle 你。Web Codecs 直接把 video binary 倒進 decoder，要哪一 frame 就要哪一 frame，效能差好幾個數量級。

但 Web Codecs 只解決 codec 那一層，你還是要自己處理 MP4、WebM 這些 container format 的 binary 解析，這件事 Jonny 說「比想像中難非常多」，因為 MP4 的 edge case 多到爆炸。他原本想自己做這層，做到一半發現有個叫 Media Bunny 的開源函式庫已經把這件事做完了，作者比他懂更多，於是他果斷把 Remotion 在 2026 年二月整個搬過去用 Media Bunny。

這段對我來說有個很實用的啟示：在 AI 加速整個產業的時候，「停下來認輸去用別人的成果」這個能力反而比一直自幹更值錢。Jonny 是個能自己編 Chrome 二進位、能寫 codec 的工程師，但他選擇承認別人做得比他好，把時間省下來做更上層的事情。

Lambda 平行 render 跟 video slop 的政治

技術細節聊完，講兩個比較社會學的點。

第一個是 Remotion 的 Lambda 平行渲染。因為每一幀都是 pure function（給定時間，輸出畫面），所以理論上可以無限平行。Wes 開玩笑問：如果是十萬個 frame，能不能開十萬個 lambda 一秒鐘 render 完？Jonny 算了一下，十萬幀大約是一小時的影片，目前 Remotion 設的硬上限是 200 個 lambda 同時跑，主要是太多平行其實邊際效益遞減。他們現在每個月用戶在 Lambda 上 render 的影片是百萬支等級。

第二個比較尷尬的是 video slop。所謂 slop 就是那種 AI 生成的廉價洗版影片，YouTube 內部把它叫做 loop content，平台正在學會偵測這類東西。Remotion 用 ffmpeg 在影片 metadata 裡留了「made by Remotion」的標記，結果有些用戶抱怨說 TikTok、Instagram 會根據這個標記降觸及。Jonny 在 podcast 裡有點懊惱地說：「如果這是真的，我向整個世界道歉，Remotion 從來不是為了 slop 而做的。」

我自己對這件事的態度比較務實。工具是中性的，但平台演算法會持續演化來偵測非原創內容，這是 cat and mouse game。如果你做的是有原創性的內容，留下這個標記反而是榮耀；如果你做的是真的 slop 想騙演算法，那這個標記就會變成你的負擔。這部分要留意，不要用 Remotion 去打沒勝算的演算法戰爭。

結語：Vibe Coded DJ 跟一個給創作者的訊號

訪談最後 Jonny 分享了他的 sick pick：Enttec DMX USB Pro，一台約一百美金的硬體，能讓 MacBook 透過 Web Serial API 直接控制 DMX 協議的舞台燈光。他用一個 prompt 就接上了，加上 Remotion 生成的歌詞影片跟 11 Labs 的人聲合成，自己做了一套 vibe coded DJ 套件，在生日派對上表演。

這個小副 story 比整集任何技術討論都更能讓我感受到，我們正在進入的時代是什麼樣子。一個會寫 Remotion 的工程師，在六個月前可能要花一個禮拜學 DMX 協議才能讓燈閃，現在他用一個 prompt 完成，把省下的時間花在做一場給朋友看的演出。技術能力的分布還是不均，但「想法到實現」的距離正在以肉眼可見的速度被壓縮。

至於繁體中文圈的創作者，我覺得 Remotion 是值得花一個下午試玩的工具。你不需要會 React，裝個 Claude Code、跑一行 npx skills add remotion，剩下的對話就是了。如果你有 indie 產品要做 launch 影片、有 newsletter 想做 cover animation、或者像我一樣有部落格想做動態 OG image，這條路徑現在順得不像話。

更多這類產業跟工具觀察，我會持續寫在 wilsonhuang.xyz，訂閱就不會漏掉。

Sources:

• Remotion's 150K Installs on skills.sh and What It Means for AI Video
• Jonny Burger - LinkedIn