Claude 動畫怎麼做？40 分鐘製作 20 秒 Motion Graphics 影音，附 24 種特效指令教學
社群近期掀起 Claude Motion Graphics（動態圖像設計）創作熱潮，創作者用自然語言指令，就能做出 3D 產品動畫、動態文字與數據圖表。
這次以五款加密貨幣支付卡為題材，使用每月 20 美元的 Claude Pro 方案，實測透過 Claude Opus 5.5 製作一支 20 秒、1080 × 1920 的直式動態廣告。本文完整拆解製作流程、修改經驗，並整理 24 種常見 Motion Graphics 特效與可直接複製的中文指令。
Claude Motion Graphics 是什麼？
Claude Motion Graphics 指的是用 Claude 撰寫動畫程式，再由程式「畫」出每一格畫面的動態圖像製作方式。創作者用中文描述畫面、節奏與特效，Claude 負責理解需求、撰寫與修改程式，Remotion 則用 React 與 TypeScript 控制時間軸，最後渲染成 MP4。
Motion Graphics 是用文字、圖形、圖片與動態效果呈現資訊的視覺設計形式，常見於科技產品廣告、App 操作展示、社群短影音與財經圖表。過去通常要在 After Effects 手動設定關鍵影格、遮罩與鏡頭，現在可以直接用文字指令產生。
例如輸入「讓五張卡片從不同方向依序飛入，帶有 3D 旋轉與動態模糊」，Claude 就會建立對應的動畫元件，並可精準調整每張卡片的進場時間、旋轉角度與速度。這種做法適合需要精準控制品牌 Logo、字體、產品資訊與圖表的商業影片，完成後也能存成模板，換資料就能重新輸出。
為什麼社群都在分享 Claude 動畫？
9 月 25 日，X 用戶 @stephanlivera 分享使用 Claude Opus 5.5（Max effort）生成的 15 秒 Motion Graphics 動態設計作品集，迅速在社群引發關注。貼文目前累積超過 229 萬次瀏覽，使用的指令相當簡單：「製作一支 15 秒、充滿動感的動態設計影片，展現頂尖動態設計師的實力，就像用於求職履歷的個人作品集，盡情發揮創意。」
模型能力是另一個關鍵。Anthropic 於 2026 年 9 月 22 日推出 Claude Opus 5.5，官方表示每項任務用到的 Token 更少、輸出速度比 Opus 5 快 30% 以上，典型工作的執行成本低約 40%。對需要寫大量程式、反覆修改的動畫專案來說，同樣的訂閱額度可以做更多事。
社群也開始出現專門收錄這類作品的網站，例如 Prompt Motion 依 Product UI、Kinetic type、Charts、Particles 等分類整理 Claude Opus 5.5 作品與指令，讓新手可以直接套用。
Claude 動畫實測：40 分鐘完成 20 秒加密卡廣告
這次實測用 Claude Opus 5.5 約 40 分鐘完成一支 20 秒加密卡廣告。素材是 Ether.fi Card、OKX Card、Bitget Wallet Card、Plasma Card 與 Pionex Card 五款加密貨幣支付卡，卡片資料直接從 Grenade 加密卡探索頁面的 HTML 解析。
| 項目 | 本次實測 |
|---|---|
| 影片長度 | 20 秒（1080 × 1920、30fps、600 格） |
| 製作時間 | 約 40 分鐘 |
| 訂閱方案 | Claude Pro，20 美金／月 |
| 方案額度消耗 | 約 25% |
| 修改次數 | 5 輪 |
| 開發工具 | Claude、Remotion、React、TypeScript |
加密卡總覽｜新戶刷 Ether.fi Cash Card 享 10% 回饋
20 秒影片分鏡與特效拆解
| 時間 | 場景 | 使用特效 |
|---|---|---|
| 00:00–00:03 | 五張卡從不同方向飛入，排成 2–1–2 | 3D 錯開飛入、動態模糊、高速放大收斂、逐字遮罩浮現、鏡頭推進 |
| 00:03–00:10 | 五款卡片依序介紹，顯示回饋 %、用途與獨家活動 | 3D 卡片翻轉、水平滑動推移、縮放變形、鏡頭環繞 |
| 00:10–00:16 | 卡片重組成五列比較表，切換消費回饋／手續費／行動支付 | 版面重組、標籤滑塊、數字滾動計數 |
| 00:16–00:20 | 卡片縮進 Grenade 比較頁面，出現 Logo 與 CTA | 版面重組、逐字遮罩浮現 |
整支動畫用 React 與 TypeScript 拆成可重複使用的元件，包括 3D 卡片、動態文字、轉場、比較表與品牌片尾。3D 效果用 CSS Perspective 處理，卡面直接顯示原始圖片，所有卡片位置由同一條「影格對應位置」的函式計算，場景之間不會跳位。
同一套元件延伸：90 秒「精選 20 種 Motion 特效」影片
20 秒廣告完成後，直接沿用卡片、文字與轉場元件，再做出一支 90 秒的特效介紹影片。每種特效用 3 秒示範，最後播放 20 秒加密卡廣告，並在畫面上方即時標出「正在使用 3D 卡片翻轉」這類標籤，讓觀眾看懂特效如何組成一支廣告。
| 時間 | 段落 | 內容 |
|---|---|---|
| 0–3 秒 | 開場總覽 | 「精選 20 種 Motion 特效一次看懂」，20 格縮圖同時播放真實特效 |
| 3–63 秒 | 20 種特效 | 每種 3 秒：名稱、示範、「適合解決」、中文指令 |
| 63–66 秒 | 過橋 | 20 格總覽中標出廣告實際用到的 12 種 |
| 66–86 秒 | 成品 | 播放 20 秒加密卡廣告，即時標示正在使用的特效 |
| 86–90 秒 | 片尾 | Grenade Logo 組合動畫與留言領取 CTA |
這支影片的重點在「元件化」。各特效共用同一個版型，只替換中間的示範區，迷你總覽格直接縮小播放同一個示範元件，修改一種特效，總覽頁就會同步更新。音效則改用三個短 UI 音檔（提示音、轉場聲、滑鼠點擊），配樂為 120 BPM 的程式合成電子樂。
Claude 動畫製作教學：7 個步驟從素材到輸出 MP4
用 Claude 製作 Motion Graphics 可以拆成 7 個步驟，最花時間的是第 5–6 步的預覽與修改，第 4 步先用靜態圖把關，可以省下最多時間。
步驟一：準備素材與資料
一次提供產品圖片、品牌 Logo（優先 SVG 或透明 PNG）、網頁 HTML 或資料表。內容要是包含回饋、手續費等數字，請指定資料來源與適用條件，避免 AI 自行填寫。
步驟二：設定影片規格與分鏡
說清楚秒數、解析度、fps、品牌色、中英文字體、Reels 安全區，以及每個場景「必須出現」的文字與數據。可附上 Prompt Motion 的作品連結當作節奏參考。
步驟三：建立 Remotion 專案與共用元件
讓 Claude 用 React、TypeScript 建立 3D 卡片、動態文字、轉場、比較表、品牌片尾等元件，之後換卡、改字或延伸成其他影片都不用重寫。
步驟四：先輸出代表影格
每個場景先出 1–2 張靜態圖，檢查產品比例、文字位置、Logo 與安全區，確認後再渲染整支影片。
步驟五：預覽完整影片
檢查轉場連續性、物件移動軌跡、文字停留時間與裁切，並確認音效與動畫節奏。
步驟六：針對問題局部修改
用具體秒數與元件描述需求，例如「1:16 卡片轉場不要停留」、「#04 數字一進場就開始滾動」、「換卡音效改成滑鼠點擊聲」。
步驟七：渲染輸出 MP4
輸出 1080 × 1920、H.264 編碼的影片，同時保留原始碼、素材清單與 README，方便下次套用。
如何減少 Claude 動畫修改次數？
減少修改最有效的方法，是在第一個指令就交齊素材、指定音效與字體，並要求先看代表影格。本次 5 輪修改的原因，全部都能在開場指令裡先講清楚。
| 修改次數 | 發生什麼問題 | 開場指令可以怎麼寫 |
|---|---|---|
| 第 1 輪 | 卡片圖無法從官網下載，改手動上傳 | 一次附上完整圖片、Logo 與資料檔 |
| 第 2 輪 | 網頁裡的綠色圖其實是社群按鈕，被誤用成 Logo | 直接提供官方 Logo（SVG 或 PNG），禁止重繪 |
| 第 3 輪 | 開場卡片交錯堆疊，卡面被擋住 | 「每張卡面完整露出、不重疊」 |
| 第 4 輪 | 音效太像電玩，改成柔和電子樂與滑鼠點擊聲 | 附上指定音效檔，或寫清楚風格與禁用音效 |
| 第 5 輪 | 單卡介紹缺回饋 %、英數字體不夠整齊 | 列出每個場景必備資訊與中英文字體 |
另一個實用的做法，是要求 Claude 先交分鏡表與每場一張代表影格，確認後才渲染。改靜態圖只要幾秒，重新渲染整支影片則要數十分鐘，也會多消耗額度。
Claude Motion Graphics 完整中文指令範本
以下指令可直接用於 Claude，把【】內的內容換成你的題材、素材與分鏡即可。
請使用 React、TypeScript 與 Remotion 製作一支
【秒數】秒、1080×1920、30fps 的 Motion Graphics 動態廣告，用於 IG Reels。
【素材】
使用附件中的產品圖片、官方 Logo（SVG）與資料來源
所有圖片保持原始比例，禁止重繪品牌 Logo
數字與價格只能從資料來源取得，保留適用條件與資料日期
音效使用附件的【提示音／轉場聲／滑鼠點擊】三個音檔
【視覺】
風格：白底、極簡科技感，主色【色碼】
中文字體：思源黑體；英數字體：Figtree（500／700／900）
安全區：上 250px、下 380px、左右 72px
重要元素不得被裁切或互相遮擋
【分鏡】（特效名稱對應下方 24 種特效表格編號）
00:00–00:03 五張卡用「3D 錯開飛入」搭配「動態模糊」進場，排成 2–1–2 不重疊；
標題用「高速放大收斂」與「逐字遮罩浮現」，收尾用「鏡頭推進」接下一場
00:03–00:10 依序介紹五張卡（卡名＋回饋 %＋用途），換卡輪流使用
「3D 卡片翻轉」「水平滑動推移」「縮放變形」「鏡頭環繞」
00:10–00:16 用「版面重組」排成五列比較表，「標籤滑塊」切換比較項目，
數值用「數字滾動計數」
00:16–00:20 用「版面重組」把卡片縮進品牌頁面，標語用「逐字遮罩浮現」，最後出現 Logo 與 CTA
【特效細節】（從 24 種特效表格複製要用的單一指令，建議 3–5 條）
3D 錯開飛入：五張卡從不同方向飛入，錯開 0.12 秒，位置先到、旋轉晚 0.3 秒收斂
數字滾動計數：數字一進場就像計分板往上滾到目標值，每一位數錯開 2 格停止
【貼上其他要用的特效指令】
【動畫規則】
所有動作使用 easing，不要線性移動
場景之間物件位置連續，轉場不要停頓
卡片比例與視覺大小一致
文字停留時間足夠閱讀
【特效細節】沒列到的特效，由你依分鏡自行決定參數
【開發流程】
先分析素材與資料
產出分鏡與動畫規格
建立可重複使用的 Remotion 元件
每個場景先輸出代表影格，等我確認
確認後再渲染完整影片
修改時只重算受影響的場景
交付 MP4、原始碼、素材清單與 README製作 15–20 秒短影音時，建議優先選擇 3–5 種核心動畫特效，避免效果過多造成視覺雜亂。本次 20 秒廣告共運用 12 種特效，分配在四個場景中，每個場景以一個主要動作為核心，搭配文字、轉場等輔助動畫，維持畫面節奏與視覺一致性。
如果缺乏動畫靈感，也可以將影片主題、素材與預期風格提供給 Claude，參考上述 24 種 Motion Graphics 特效，讓 AI 推薦適合的動畫組合、分鏡安排與轉場方式，再進一步生成製作指令。
24 種常見 Motion Graphics 特效與中文指令
一、文字動畫：5 種 Kinetic Typography
| 特效 | 適用場景 | Claude 中文指令 |
|---|---|---|
| 01. Mask Reveal 逐字遮罩浮現 | 標題、字幕進場 | 標題每個字從下方遮罩滑入，錯開 0.05 秒，帶 8 度傾斜與輕微模糊，0.5 秒內完成 |
| 02. Kinetic Zoom 高速放大收斂 | 開場、重點數字 | 大字從 2.8 倍放大、模糊 18px 快速收到原尺寸，字距同步收緊 |
| 03. Text Morph 文字變形 | 關鍵字切換 | 「更快」變形成「更便宜」，舊字上浮淡出、新字從下方補上，膠囊寬度同步過渡 |
| 04. Number Roll 數字滾動計數 | 百分比、金額 | 數字一進場就像計分板往上滾到目標值，每一位數錯開 2 格停止，字體與標題編號一致 |
| 05. Typewriter 打字機 | AI 指令、搜尋欄 | 指令一字一字打出，每秒 18 字，尾端游標 0.5 秒閃一次 |
二、轉場與鏡頭：7 種產品展示特效
| 特效 | 適用場景 | Claude 中文指令 |
|---|---|---|
| 06. Staggered Fly-in 3D 錯開飛入 | 多產品開場 | 五張卡從不同方向飛入，錯開 0.12 秒，位置先到、旋轉晚 0.3 秒收斂 |
| 07. Card Flip 3D 卡片翻轉 | 切換產品 | 前一張卡以 Y 軸翻到側面讓位，後方卡片轉正並推到前景 |
| 08. Slide / Push 水平滑動推移 | 輪播、步驟切換 | 舊畫面往左加速滑出並帶 6 度傾斜，新畫面從後方滑出再置中 |
| 09. Scale Morph 縮放變形 | 特寫轉全景 | 舊元素縮小飄向上方，新元素從 0.8 倍放大到 1.06 再回彈到 1 |
| 10. Camera Orbit 鏡頭環繞 | 3D 產品舞台 | 整個舞台繞 Y 軸轉 26 度再回正，卡片跟著環繞進場 |
| 11. Push-in 鏡頭推進 | 強調重點、連接下一幕 | 標題收尾後，鏡頭在 0.4 秒內推近 1.2 倍，直接接到下一場 |
| 12. Motion Blur 動態模糊 | 高速移動 | 依物件速度加上模糊，最高 9px，靜止時完全清晰 |
三、版面與介面：5 種產品與 App 展示特效
| 特效 | 適用場景 | Claude 中文指令 |
|---|---|---|
| 13. Layout Morph 版面重組 | 單一特寫轉多項比較 | 主卡片立刻縮小移到列表，其他卡片從深處依序就位，錯開 0.08 秒 |
| 14. Bento Grid 便當格展開 | 功能總覽 | 六個圓角方塊從中央向外展開成 2×3 格，方塊就位後內容才淡入 |
| 15. Tab Indicator 標籤滑塊 | 切換比較項目 | 綠色指示器移動時先拉長 70px 再收回，文字顏色同步切換 |
| 16. Cursor Click 游標點擊示範 | 教學「點哪裡」 | 游標沿弧線移到按鈕，按下時按鈕縮到 0.95 並擴散一圈漣漪 |
| 17. Phone Mockup 手機畫面滾動 | App、網站展示 | 手機外框微傾 10 度浮起，螢幕內頁面向上滾動 600px 並停在重點區塊 |
四、圖形、資料與節奏：7 種進階特效
| 特效 | 適用場景 | Claude 中文指令 |
|---|---|---|
| 18. Chart Build 圖表生長 | 數字比較 | 長條圖從底部依序長高，錯開 0.1 秒，數值同步計數，最高那條用主色 |
| 19. Path Draw 線條描繪 | 申辦流程、操作步驟 | 四個步驟方框依序出現，連線從上一框畫到下一框，線上光點移動，完成的方框變綠並打勾 |
| 20. Shape Morph 形狀變形 | Logo 開場 | 圓形變成圓角方形，再依官方 SVG 拆成九塊標誌，標誌左移後字標由左往右展開 |
| 21. Particles 粒子聚合 | 科技感開場 | 數百個小圓點從畫面四周飄入，聚合成品牌字標後靜止，粒子數不超過 300 |
| 22. Mask Wipe 遮罩轉場 | 大段落換場 | 用主色圓形從按鈕位置擴散覆蓋全畫面，再露出下一場，全程 0.5 秒 |
| 23. Liquid Glass 毛玻璃質感 | 通知卡片、深色背景 UI | 半透明白色卡片，背景模糊 24px，邊緣 1px 亮線，從下方浮起 |
| 24. Beat Sync 節拍同步 | 影片節奏感不足 | 配樂 120 BPM，每一拍（0.5 秒）換一張卡，換卡瞬間放大 6% 再回彈 |
Claude 動畫可以搭配哪些 AI 影片工具？
Claude 搭配 Remotion 擅長品牌文字、產品 UI 與數據圖表；Seedance、Kling、Google Veo 等影片生成模型則擅長人物、物理與電影感鏡頭。實務上可以先用影片模型生成產品或人物素材，再由 Claude 用 Remotion 疊上動態文字、Logo、產品資訊與轉場。
| AI 模型 | 核心能力 | 適合應用 |
|---|---|---|
| Seedance 2.5 | 最長 30 秒、影音同步、多模態參考、鏡頭控制 | 電影感廣告、產品短片 |
| Gemini Omni 1.1 Flash | 影片延長、首尾影格控制、4K 升頻 | 影片編輯、轉場製作 |
| Google Veo 3.1 | 原生音效與對白、真實物理效果、角色一致性 | 品牌形象、電影感鏡頭 |
| FLUX 3 | 文字與圖片轉影片、原生音訊 | 創意廣告、產品展示 |
| Kling 4.0 | 最長 30 秒、複雜動作、最多 15 項參考素材 | 人物動畫、劇情短片 |
| MiniMax H3 | 最高 2K、15 秒、原生立體聲、動作轉移 | 品牌廣告、產品展示 |
| Wan 3.0 | 最長 30 秒、1080p、多模態參考、影音同步 | 多場景敘事、產品短片 |
各模型的規格、API 開放程度、生成額度與商用授權更新頻繁，如果希望自動化，可透過 MCP 把影音工具接進 Claude，由 Claude 一起處理素材、分鏡與輸出。
哪裡可以找到更多 Motion Graphics 動畫靈感？
- Prompt Motion
收錄動態文字、產品 UI、圖表、粒子及手機動畫等作品，可參考不同動畫風格與對應指令。
- Magnific
Magnific 提供 AI 圖像生成、影片及影像強化等功能，可透過 MCP 與 Claude 串接，適合製作高解析度的產品視覺與動畫素材。
- Higgsfield
Higgsfield 提供 AI 影像與影片生成工具，可透過 MCP 整合至 Claude 工作流程，適合製作電影感鏡頭、產品動畫與動態背景。
部分服務需要付費方案、API 權限或生成點數，實際可使用的模型與功能應以各平台最新公告為準。
AI 影音趨勢：從動畫生成走向自動化短影音製作
隨著 AI 影音工具持續發展，動態影片製作逐漸朝向模組化、自動化與多模型整合。從動畫生成、配音、字幕到剪輯，創作者可以搭配不同工具，縮短製作時間並降低成本。
對於個人創作者、小型團隊及需要定期產製社群短影音的品牌而言，AI 工具提供了更多製作選擇，讓缺乏專業動畫經驗的使用者，也能嘗試過去需要較多時間與預算的視覺效果。至於高規格商業廣告、品牌形象影片或複雜動畫專案，則可結合動畫師、動態設計師與剪輯師的專業技術，進一步提升畫面品質、動作細節與敘事節奏。
從這次實測來看，Claude 已能協助完成具備多種特效的 20 秒動態廣告，實際成果仍取決於創意構想、前期企劃、素材品質與指令完整度。隨著工具持續進步，AI 與專業製作流程的結合，也將為不同預算與規模的影音專案帶來更多應用空間。
Claude Motion Graphics 常見問題 FAQ
Claude 可以直接做出 MP4 動畫嗎？
可以。Claude 會建立 Remotion 專案，用 React 與 TypeScript 寫出動畫，再由 Remotion 渲染成 MP4，執行時需要對應的開發環境。
用 Claude 做動畫需要會寫程式嗎？
不一定。創作者可以用中文描述畫面與特效，由 Claude 撰寫程式；具備基本的檔案管理與除錯概念，處理素材路徑與渲染問題會更順。
用 Claude 做一支 20 秒影片要多久？
實測約 40 分鐘，包含 5 輪修改，消耗 Claude Pro 方案約 25% 額度。實際時間依影片複雜度、素材完整度與渲染環境而定。
Claude 動畫和 Seedance 有什麼差別？
Claude 搭配 Remotion 擅長動態文字、產品 UI、數據圖表與可精準修改的品牌動畫；Seedance 著重影片生成、人物動作與運鏡。兩者可以放在同一套工作流程裡。
Claude 做的動畫可以商用嗎？
用 Claude 與 Remotion 製作的影片可依各自條款用於商業用途，但仍需確認產品圖片、品牌 Logo、字體、音樂與音效的授權。Remotion 對部分公司規模需要另購公司授權。
參考資料
- Anthropic｜Introducing Claude Opus 5.5
- Remotion｜官方文件
- Prompt Motion｜Motion Graphics 作品與指令
- AY Automate｜Claude Opus 5.5 Motion Graphics: Real Prompts
- Magnific｜MCP 官方文件
- Higgsfield｜MCP
加密貨幣屬於高風險投資，本網站內容均不構成任何投資建議與責任。
掌握虛擬貨幣、區塊鏈大小事
