作者注：拆解 Claude 做視頻的完整原理：每幀都是時間的純函數 seek（t）、無頭瀏覽器 + ffmpeg 四步逐幀渲染、閉合彈簧與卡拍讓動效順滑，最後給出可照做的 5 步上手流程。
如果你最近刷過中文 X，大概率見過一種短片：文字彈性入場、圖表隨節拍生長、3D 物體緩緩旋轉，標註寫着「Claude 做的」。2026 年 9 到 10 月，Claude 做視頻成了熱門玩法，起點之一是 @guanmo_ai（觀默）發佈的一支 13 秒動效短片。
作者本人的說明很直接：「這支片子是我讓 Opus 5.5 一行行寫代碼渲染出來的，沒用任何視頻生成模型」。他在評論區又補了一句：「用代碼渲染出來，然後逐幀渲染成視頻」。
這不是 Claude 悄悄上線了視頻模型，也不是什麼神祕插件。整件事的核心只有一個時間函數加四步渲染流水線，本文把原理逐層講透，再給出照着能做的 5 步流程。寫場景代碼這一步，可以通過 API易 apiyi.com 按量調用 claude-opus-5-5 來完成。
核心價值：讀完本文，你會明白 Claude 做視頻爲什麼成立、動效爲什麼順、提示詞爲什麼越短越好用，並能自己跑出第一支 MP4。
Claude 做視頻的原理：沒有視頻模型，像素從哪來
一句話結論：Claude 只負責寫代碼，像素是瀏覽器畫出來的。
Claude Opus 5.5 是純文本模型，輸入文本和圖片，輸出的只有文本。第三方技術博客 BeatAPI 寫明，Anthropic 於 2026-09-22 發佈 claude-opus-5-5，支持 1M 上下文、最多 128K 輸出 token，沒有視頻模型。所以大家說的「Opus 5.5 做的視頻」，模型真正交出來的是一個網頁：只要告訴它時間點，它就能畫出動畫在那一刻的畫面。
打個比方，Claude 像寫樂譜的作曲家，瀏覽器是照譜演奏的樂手，ffmpeg 是錄音棚。作曲家本人不發出一個音符，但樂譜寫得夠精確，錄出來的就是完整的曲子。
| 對比維度 | 視頻生成模型 | Claude 做視頻（代碼渲染） |
|---|---|---|
| 模型產出 | 直接輸出像素幀 | 輸出 HTML/JS 場景代碼 |
| 像素來源 | 模型神經網絡生成 | 瀏覽器 Canvas、SVG、WebGL 繪製 |
| 可修改性 | 改一處往往要整段重生成 | 改一行代碼，重渲即可 |
| 結果確定性 | 同提示詞多次結果不同 | 同一份代碼每次渲染完全一致 |
| 文字與數據 | 文字容易糊、數字容易錯形 | 字體清晰，數據按代碼精確繪製 |
| 擅長內容 | 真人、實拍質感、自然場景 | 動效、信息圖、數據動畫、logo 揭示 |
seek（t） 是什麼：每一幀都是時間的純函數
一句話結論：給我任意一個時間點，我永遠還你同一張畫面。
想象你拿着視頻播放器的進度條，隨手拖到第 3.5 秒，畫面立刻定格在那一張，跟你之前看過哪幾秒毫無關係。這就是「純函數」的意思：畫面只由時間 t 決定，不依賴歷史狀態。
場景代碼對外只暴露兩個約定，這兩條出自 BeatAPI 的提示詞模板和 awesomeclaude.ai 的渲染腳本：
window.DURATION：整支片子的總時長，單位秒。async window.seek(t)：跳到第 t 秒，並把這一幀完整畫完再返回。
爲了守住這個契約，場景裏明確禁止以下寫法：
Date.now()：讀的是真實牆鍾，渲染時和畫面時間對不上。requestAnimationFrame逐幀累加：位置靠「上一幀 + 增量」推出來，一旦跳幀就錯位。- CSS
transition、setTimeout、setInterval：都依賴真實流逝的時間。 - 未播種的
Math.random()：每次渲染隨機結果不同，畫面會閃爍。
爲什麼必須是確定性渲染
一句話結論：渲染不是實時播放，幀與幀之間沒有「連續」可言。
實時播放時，第 400 幀緊跟着第 399 幀出現。但離線渲染時，第 400 幀可能在第 399 幀之後好幾秒才截圖，甚至多幀並行渲染。任何跨幀累積的狀態都會讓畫面抖動、閃爍，或者兩次渲染結果不一致，所以位置必須寫成 t 的函數，隨機數必須用固定種子。
awesomeclaude 的渲染腳本還有一招更省心：注入虛擬時鐘。它接管 performance.now、Date.now、requestAnimationFrame 和 document.getAnimations()，每幀調用一次 __advance(1/fps)，讓時間嚴格一幀一幀往前走。這樣場景代碼不用改，rAF 循環、GSAP、CSS 動畫都能被正確驅動。
Claude 做視頻的 4 步逐幀渲染：從 HTML 到 MP4
一句話結論：這本質上是在拍定格動畫，只不過擺模型的是代碼、按快門的是無頭瀏覽器。
定格動畫的做法是擺一下、拍一張、再擺一下。Claude 做視頻的流水線完全一樣：代碼負責把畫面「擺」到第 t 秒，瀏覽器負責「拍」，ffmpeg 負責把幾百上千張照片串成視頻。
| 步驟 | 誰來做 | 做什麼 | 關鍵要點 |
|---|---|---|---|
| ① 寫場景 | Claude 模型 | 生成自包含單文件 HTML | 暴露 DURATION 與 seek(t) |
| ② 逐幀採樣 | Playwright 無頭瀏覽器 | 推時間到 t，截一張 PNG，循環到末幀 | 首幀前等字體加載完成 |
| ③ 編碼成片 | ffmpeg | PNG 經管道送入，編碼 H.264 | yuv420p、crf 18、+faststart |
| ④ 音頻後混 | ffmpeg | 獨立音軌最後混入 MP4 | 不錄瀏覽器聲音 |
第一步，模型通常寫出一個單文件 HTML，用 Canvas 2D、SVG+GSAP、Three.js/WebGL 或 GLSL shader 來畫。單文件的好處是零依賴，扔進任何瀏覽器都能打開。
第二步由 Playwright 打開頁面，把時間推到 t、截圖、再推下一幀。第三步把 PNG 逐幀經管道送進 ffmpeg，編碼參數常用以下三項：
-pix_fmt yuv420p：兼容絕大多數播放器和社交平臺。-crf 18：接近視覺無損的畫質檔位。-movflags +faststart：把索引放到文件頭，網頁上能邊下邊播。
第四步單獨混音。瀏覽器錄音的時間軸和畫面時間軸不是一回事，用獨立音軌在最後混進 MP4，剪輯點和節拍才能對準。
渲染腳本的典型調用方式是一行命令：node 渲染腳本.js scene.html out.mp4 6 60 1920 1080。六個參數依次是：
scene.html：輸入的場景文件。out.mp4：輸出文件名。6：時長，單位秒。60：幀率 fps。1920、1080：畫面寬和高。
關於速度，awesomeclaude 自述實測：Linux + Chrome + ffmpeg 7 環境下，2 秒 30fps 的片子約 6 秒渲完，第 45 幀正好落在 t=1.500。這是他人自報，不是基準，你的機器配置不同結果會有差異。觀默的 build 段則做得更細：每幀額外渲 4 個 subframe，再用 ffmpeg 的 tmix 濾鏡合成運動模糊，成片 60fps。
Claude 做視頻的技術棧怎麼選
一句話結論：庫決定怎麼造，風格決定像不像 AI。
awesomeclaude 統計了 703 條已發佈結果裏提名的技術棧，同時發現只有 38% 的提示詞明確指定了庫，其餘由模型自己挑。
| 技術棧 | 佔比 | 最適合的內容 |
|---|---|---|
| Canvas 2D | 38% | 動效、動態字、粒子、圖表、講解片 |
| SVG + GSAP | 26% | logo 演繹、UI 動畫、線條繪製 |
| Three.js / WebGL | 19% | 3D 轉檯、空間穿行 |
| GLSL shader | 13% | 抽象循環、流體流動效果 |
如果要做一分鐘以上的多場景長片，Remotion、HyperFrames 這類框架自帶幀時間和渲染器，比手搓單文件 HTML 省事得多。
Claude 做視頻爲什麼順：閉合彈簧、卡拍、運動模糊與自檢
能出片只是第一層，片子看起來順不順、有沒有「AI 味」，靠的是下面幾條運動學原理。
閉合彈簧：用公式算位置，而不是一步步推
一句話結論：彈簧位置直接從 t 算出來，不靠逐幀模擬。
普通的彈跳模擬是每一幀給速度加一點、給位置加一點，像一步步推小球。閉合形式階躍響應（closed-form step response）則是一個公式，代入 t 就能直接得到小球在那一刻的位置。如果一個元素被多次改目標，就把多個彈簧響應相加，結果依然只依賴 t。
同理，所有物理量都提前算好或用解析式表達。逐步積分在幀亂序時會漂移，這和前面講的 seek（t） 契約是同一個道理。
卡拍與運動模糊：節奏和質感的來源
卡拍的做法是用 numpy 分析 BGM，得到一張節拍網格，把關鍵動作落在節拍上，而不是憑感覺給時長。觀衆未必說得出爲什麼舒服，但畫面和鼓點對齊時，片子會顯得非常「專業」。
運動模糊則對應前面提到的 subframe 技巧。快速移動的物體在真實攝影中本來就會拖影，每幀多采幾個子幀再混合，畫面會從「幻燈片式跳動」變成「電影式流動」。
聯繫表自檢：先看縮略圖，再渲全片
一句話結論：渲全片之前先渲一張「縮略圖拼圖」，提前發現問題。
聯繫表（contact sheet）是攝影術語，把多張小圖拼在一張紙上快速瀏覽。全片渲染前，每分鐘或每一拍先渲一幀，拼成一張圖，檢查文字有沒有重疊、有沒有空鏡、節奏有沒有拖。
awesomeclaude 總結了六條硬規則，可以直接當檢查清單：
- 讀時間，不數幀。
- 所有隨機數都播種。
- 不用逐 tick 積分的物理。
- 首幀前
await document.fonts.ready，否則前幾幀會是回退字體。 - 聲音交給 ffmpeg 混，不錄瀏覽器。
- 色彩標 BT.709，否則部分播放器會偏色。
觀默還分享過三個踩坑經驗：給會被相機縮放的層加 will-change 會讓文字發虛；在形變容器裏換文字要單獨設進出場時間；首尾幀必須完全一致，否則循環播放時會抖一下。
Claude 做視頻的提示詞爲什麼短反而好用
一句話結論：給方向和禁區，比給一堆參數更能激發模型的設計能力。
觀默公開過一句話提示詞原文，並明確說用 Opus 5.5 不需要 skill，一句話就夠：make a dynamic 15-second motion graphics video that shows what an incredible motion designer you are, like it's your showreel for a résumé. go all out. 意思是「做一支 15 秒動態視覺短片，當作你求職的作品集，全力以赴」。他的經驗是，寫「頂尖、全力以赴」比寫一堆詳細參數更有效。
awesomeclaude 統計的 496 條完整提示詞裏，近一半不到 200 字符。只有 7% 的提示詞要求模型自己檢查幀，但高質量結果幾乎都做了自檢。
需要更可控時，可以參考觀默的六段式結構：
- inputs：先讓模型反問，要 8-12 個 UI 狀態、配色、BPM。
- direction：風格方向，加一份 Banned 清單。
- structure：按拍子排列的狀態序列。
- build：工程約束，比如 seek（t） 契約和 subframe。
- gotchas：常見坑提醒。
- start：先給節拍表，再寫代碼。
最值得寫進提示詞的是「不要」：粒子爆發、鏡頭光斑、霓虹發光、RGB 分離、彈跳 easing，這些是 AI 味的主要來源。通用模板還要寫清時長、畫幅、分辨率、fps、事實清單和音頻信息，其中畫幅最常被漏寫，導致成片帶黑邊。
Claude 做視頻快速上手：5 步流程、耗時與價格
原理講完，下面是照着能做的流程。全程不需要寫一行代碼，命令和配置都以行內形式給出。
- 準備本機環境：安裝 Node.js、Chrome 和 ffmpeg。終端執行
npx playwright install chromium裝好無頭瀏覽器，再執行ffmpeg -version確認 ffmpeg 可用。 - 接入模型：在你常用的 OpenAI 兼容客戶端裏填三項，
base_url填https://api.apiyi.com/v1，api_key填在 API易 控制檯創建的 Key，model填claude-opus-5-5。 - 寫提示詞：一句話版本直接套用上面的作品集提示詞；需要可控就用六段式，務必寫明時長、畫幅、
1920x1080、60fps，並要求場景暴露window.DURATION與window.seek(t)。 - 先渲聯繫表和短片段：讓模型先給分鏡和 4 個關鍵幀，再渲 2-3 秒片段驗證。確認沒有 timer、字體正常、首尾幀一致後再繼續。
- 全片渲染與混音：執行
node 渲染腳本.js scene.html out.mp4 15 60 1920 1080，然後用 ffmpeg 把 BGM 混進成片，音頻編碼選-c:a aac，並加-shortest讓音視頻等長。
如果用的是 Claude Code，它能自己寫場景、自己跑渲染腳本、讀回 contact sheet 並修正，直接產出帶音軌的 MP4。想固定一套視覺風格，可以打開項目裏的 .claude/skills/SKILL.md，寫入以下幾行：
- 第一行寫
name: motion-video，作爲技能名。 - 第二行寫
description:，說明「生成基於 seek（t） 的動效短片」。 - 之後逐行寫風格規則，比如 Banned 清單、配色、字體、必須
await document.fonts.ready。
之後一句話就能復現同一套視覺。至於 claude.ai 網頁版，適合直接在頁面裏預覽效果，但錄屏會丟幀、鎖在屏幕分辨率，也沒法混音。
Claude 做視頻的耗時與花費參考
以下數據全部是他人公開自報的單點數據，不是基準，僅供量級參考。
| 場景 | 耗時 | 花費或用量 | 數據性質 |
|---|---|---|---|
| 15 秒一次性生成 | 約 1 分鐘 | 約 2 美元 API 花費 | 他人自報，不是基準 |
| 5 分鐘講解片（含 TTS 與字幕） | 26 分鐘 | 未公開 | 他人自報，不是基準 |
| 3 分鐘歷史題材，約 7400 行代碼 | 約 1 小時 | 用掉周額度 7% | 他人自報，不是基準 |
| 4K60 整首歌，只算渲染 | M5 Pro 上約 57 分鐘 | 本地渲染，不花模型錢 | 他人自報，不是基準 |
| LaunchVideo 公開 demo | 約 4 分鐘 | 約 9 萬輸入 + 1.5 萬輸出 token | 他人自報，不是基準 |
按 LaunchVideo 這份 token 預算換算模型成本：輸入 9 萬 ÷ 100 萬 × 4 美元 = 0.36 美元，輸出 1.5 萬 ÷ 100 萬 × 20 美元 = 0.30 美元，一條約 0.66 美元。實際花費取決於你的提示詞長度和修改輪數。
claude-opus-5-5 價格表
以下價格查自 docs.apiyi.com/models，單位爲美元/百萬 tokens，按量計費，查於 2026-10-26。
| 模型 | 類型 | 輸入 | 輸出 | 緩存讀 |
|---|---|---|---|---|
| claude-opus-5-5 | 文本 | 4 美元 | 20 美元 | 0.2 美元 |
| claude-opus-5-5-thinking | 文本 | 4 美元 | 20 美元 | 0.2 美元 |
型號與價格以平臺型號列表爲準，實際價格以控制檯實時顯示爲準。反覆修改同一個場景時，長提示詞和已有代碼會命中緩存讀，單價遠低於普通輸入。
🚀 快速開始：建議先在 API易 apiyi.com 用新用戶免費額度跑一支 5 秒短片，把環境、提示詞和渲染腳本整條鏈路走通，再投入長片製作。
Claude 做視頻的邊界
一句話結論：代碼能畫的都能做，需要攝像機拍的做不了。
代碼渲染擅長動效、動態字、信息圖、數據動畫、產品演繹、logo 揭示和 3D 場景。它不是真人實拍，也不做口型同步，需要真人出鏡、街景實拍或電影鏡頭，得另外接視頻生成模型或補拍素材。
另外兩個現實問題：模型偶爾會把 timer 寫進場景，長片的章節拼接也可能不乾淨，所以先渲短片段驗證再渲全片。講解類內容裏的數字要自己覈對，模型可能把事實寫錯。
Claude 做視頻常見問題 FAQ
Q1：Claude 做視頻到底是什麼？
它是讓 Claude 寫出一個可按時間取幀的網頁場景，再由無頭瀏覽器逐幀截圖、ffmpeg 編碼成 MP4。模型本身不生成像素，像素全部由瀏覽器繪製。
Q2：Claude 做視頻和 Sora 這類視頻生成模型有什麼區別？
視頻生成模型在真人和實拍質感上保持領先，但文字清晰度、數據準確性和可修改性受限。相比之下，Claude 做視頻在信息圖、數據動畫、logo 演繹上更穩定，改一行代碼就能精確調整。
Q3：這個玩法是什麼時候流行起來的？
2026 年 9 到 10 月在中文 X 上走紅。按 BeatAPI 的說法，claude-opus-5-5 於 2026-09-22 發佈。觀默隨後公開了案例庫 awesome-ai-motion，截至 2026-10-26 共收錄 1417 條作品索引，但每條都沒有被維護者獨立復現，只能當參照。
Q4：Claude 做視頻最適合哪些場景？
– **產品宣傳**：功能演示、界面動畫、發佈會片頭。
– **知識講解**：數據圖表生長、流程拆解、科普動畫。
– **品牌動效**：logo 揭示、動態字、社交媒體短動效。
– **3D 展示**：產品轉檯、空間穿行。
Q5：如何通過 API 調用 claude-opus-5-5 來寫場景代碼？
1. 在 API易 apiyi.com 註冊並創建 API Key。
2. 客戶端裏把 `base_url` 設爲 API易 的 OpenAI 兼容地址，模型名填 `claude-opus-5-5`。
3. 發送提示詞拿回單文件 HTML，交給本地渲染腳本出片。
同一個 Key 還能切換 Claude、GPT、Gemini 等模型，方便對比哪家寫的動效更好。
Q6：做一支短片大概要花多少錢？
按他人自報的 LaunchVideo 用量估算，模型成本約 0.66 美元一條；有人自報 15 秒片約 2 美元。這些都不是基準，建議先用 API易 apiyi.com 的按量計費小額測試，記錄自己的真實 token 用量再做預算。
Q7：爲什麼我渲出來的片子會閃爍或抖動？
最常見的原因是場景裏用了 `Date.now()`、逐幀累加或未播種的隨機數，違反了 seek（t） 契約。其次檢查首尾幀是否一致、首幀是否等待字體加載完成。
Claude 做視頻核心要點與總結
Key Takeaways
- 像素來源：Claude 只寫代碼，畫面由瀏覽器繪製，不需要視頻模型。
- 核心契約：每幀都是時間的純函數
seek(t)，任意時刻畫面唯一確定。 - 四步流水線：寫場景、無頭瀏覽器逐幀截圖、ffmpeg 編碼、音頻後混。
- 順滑祕訣：閉合彈簧、物理預計算、卡拍、subframe 運動模糊。
- 質量保障：渲全片前先出聯繫表，提前發現重疊、空鏡和拖拍。
- 提示詞策略：短而有方向，重點寫畫幅和「不要」清單。
- 上手方式：通過 API易 apiyi.com 按量調用 claude-opus-5-5，本地完成渲染。
總結
Claude 做視頻的本質，是把「生成畫面」變成「生成能畫畫面的代碼」。只要守住 seek（t） 這個時間函數，再配上無頭瀏覽器和 ffmpeg 的四步流水線，一個純文本模型就能穩定產出可復現、可修改的動效短片。它的邊界同樣清晰：擅長動效與信息圖，不碰真人實拍和口型同步。
建議從一支 5 到 15 秒的短片開始，先跑通鏈路，再逐步加入卡拍和自檢。寫場景代碼這一步，推薦通過 API易 apiyi.com 調用 claude-opus-5-5，按量計費，新用戶有免費額度可以先驗證效果。
Claude 做視頻參考資料
- 觀默原始短片與作者說明：玩法起點
- 鏈接：
x.com/guanmo_ai/status/2109941504827654305 -
說明：13 秒動效短片原帖，作者說明見
x.com/guanmo_ai/status/2104141508081525184 -
awesome-ai-motion 案例庫：Opus 5.5 代碼渲染作品索引
- 鏈接：
github.com/guanmo-ai/awesome-ai-motion -
說明：可當風格參照，條目未經獨立復現
-
awesomeclaude Claude Video 指南：渲染腳本與六條硬規則
- 鏈接：
awesomeclaude.ai/claude-video -
說明：虛擬時鐘方案和技術棧統計的出處
-
API易 模型列表：claude-opus-5-5 價格與分組
- 鏈接：
docs.apiyi.com/models - 說明：型號與價格以此頁面爲準
作者：API易 技術團隊
技術交流：歡迎在 API易 網站首頁聯繫我們，更多接入文檔可查閱文檔中心 docs.apiyi.com
