Communitygithub.com

motion-design-codice

以程式碼生成動態設計動畫(預告片、標誌片頭、品牌影片),使用 Node、Canvas 和 ffmpeg,產出可直接用於剪輯的片段。

motion-design-codice 是什麼?

這個技能讓 AI 代理能夠完全透過程式碼生成動態設計動畫,無需依賴 After Effects 等傳統動態圖形軟體。它使用 Node.js、`@napi-rs/canvas` 進行繪圖,並透過 ffmpeg 進行編碼,產生可直接用於剪輯的影片片段。其核心設計理念是「每個影格皆為時間的純函數」——每個影格獨立於其他影格,因此可以平行渲染、輕鬆檢查,並能隨時重新產生任意影格。它支援多種輸出格式:使用 H.264 編碼的 MP4 預覽檔、使用 ProRes 422 HQ 編碼的 MOV 剪輯檔,以及音訊合成功能。它還包含多項輔助工具,例如:用於視覺檢查影格的「連絡表」、用於偵測卡頓或突然動作的「分析」腳本,以及使用 `ffprobe` 進行最終驗證。此外,它遵循嚴格的連續性原則,確保動畫流暢、無空白影格,並支援高階運動效果,例如:阻尼彈簧(spring)實現流暢的緩入緩出、運動模糊(含 4 個子影格)、以及元素之間的預設重疊時機。該技能專為 Instagram Reels 設計,針對 1080×1920 解析度進行了最佳化,並將關鍵內容置於避免 UI 遮擋的區域。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Radwtsm/claude-crew/tree/main/plugins/motion-design-codice/skills/motion-design-codice

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

以程式碼進行動態設計

一開始先問

  • 格式與長度(例如:Reel 9:16 1080×1920 30 fps),將發布於何處。
  • 品牌的顏色、字型、標誌,以及不可更改的部分(logo 必須原樣使用)。
  • 參考風格(一個影片或圖片),以及是否需要文字或僅使用圖形。
  • 最終剪輯是否由使用者自行完成(Premiere/After Effects):若是,則交付片段,而非單一影片。

引擎

  • Node + @napi-rs/canvas 進行繪圖,ffmpeg 進行編碼。
  • 每個影格都是時間的純函數 draw(ctx, t):影格之間沒有狀態,因此任何影格都可以重新產生、檢查或平行渲染。
  • 檔案分離管理:函式庫(色板、字型、緩動、彈簧)、序列、背景、渲染、連絡表、分析。
  • 在 Windows 上,Python 使用 py 指令。

運動

  • 彈簧(阻尼彈簧的閉環響應)用於進場和移動:開始乾脆、結束平滑、幾乎無感 overshoot。保留 3–4 個預設(標準、快(用於出場)、慢(用於大位移)、柔和),而不是散亂的數值。
  • 柔和的 Ease-in-out 用於形狀變形和線條繪製。
  • 運動模糊:4 個子影格,180° 快門,平均值。會減慢渲染速度:預設一個不含模糊的選項用於預覽。
  • 序列元素之間的偏移量為 0.05–0.15 秒。
  • 如果風格要求優雅,則不要使用卡通彈跳;節奏放鬆,動作之間留有空間。

連續性

  • 風格為「形狀變形」:每個場景都從上一個場景的幾何形狀衍生而來,沒有硬切。
  • 一個元素在變形過程中不會消失又出現:原始元素在繼承其位置、大小和顏色的繼承者出現的同一個影格中停止繪製。
  • 互換的兩個形狀在交換瞬間共享旋轉、縮放和顏色;淡入淡出重疊(永遠不會有空影格或重疊影格)。
  • 大的白色填充:從中心以實心方式生長,而非淡入(淡入看起來會偏灰)。
  • 如果風格要求,則不要有任何靜止元素:呼吸、緩慢旋轉、漂浮、輕微推鏡。

控制

  • 在完整渲染之前,先產生連絡表(contact sheet)顯示各影格。
  • 一個分析腳本,每 0.5 秒測量影像變化量:找出停滯的片段和突然的動作。
  • 使用 ffprobe 驗證最終檔案的長度、解析度和 fps。

匯出

  • 預覽/社群媒體:MP4 H.264 -crf 14 -pix_fmt yuv420p。
  • 剪輯:MOV ProRes 422 HQ 10 bit。
  • 音訊後製合成:
ffmpeg -i video.mp4 -i audio.wav -map 0:v -map 1:a -c:v copy -c:a aac -b:a 256k -shortest finale.mp4

Instagram Reel

  • 圖形中心位於 (540, 960);有效使用寬度最多約 900 px。
  • 個人檔案網格會將中心裁切為 4:5 (1080×1350) 和 3:4:關鍵內容應位於 y ~420 到 ~1500 之間。
  • 底部和右側有說明文字和應用程式按鈕:請保持其空白。
  • 關於其他匯出尺寸,請參閱 grafica 外掛。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

相關技能