motion-anything – Open Design 開源的本地優先動效引擎

motion-anything是什麼

motion-anything 是 Open Design 團隊開源的本地優先動效引擎，定位爲免費版 Figma Motion + 無水印動效視頻工坊。工具讓動效直接活在真實運行的網頁上，所見即所得，改完可部署上線。用戶可通過自然語言描述讓 AI Agent 生成動效，支持關鍵幀精調，導出格式涵蓋代碼、視頻與可移植技能。

motion-anything的主要功能

• 真實網頁動效：產物爲可直接運行的 HTML/CSS/JS，非設計稿原型，改完即可部署。
• AI 自然語言生成：通過描述感覺可生成動效，同時支持關鍵幀與彈簧曲線精調。
• 策展級動效生態：內置 403 個動效配方、230 套 Skills、59 套設計系統與 2680 枚圖標。
• 無水印視頻工坊：支持多鏡頭編排、逐字動效與路徑繪製，瀏覽器本地渲染 MP4/GIF。
• 多 Agent 集成：自動識別 Claude Code、Cursor 等 8+ 本地代碼 Agent，支持雲端與 BYOK。
• 剋制引擎：配方自帶 avoid_when 標註，檢測到過度動效時自動警告。
• 七種導出格式：支持 JSON、CSS、React、Lottie、MP4、GIF 與 SKILL.md。

微信關注回覆“開源”，加入AI開源項目交流羣

如何使用motion-anything

• 安裝啓動：克隆 GitHub 倉庫到本地，進入目錄後執行 node cli/bin/motion.js serve 4399 啓動服務，瀏覽器訪問 localhost:4399 打開工作台。
• 生成頁面：在首頁輸入頁面描述，選擇設計系統與動效風格，點擊生成初始頁面。
• 組件編輯：選中任意組件，在 Inspector 面板調整參數或通過聊天框用自然語言描述想要的動效。
• 時間軸編排：在底部時間軸拖放組件，調整整頁動效的觸發順序、持續時長與延遲間隔。
• 導出交付：完成編輯後，選擇 JSON、CSS、React、Lottie、MP4、GIF 或 SKILL.md 格式導出交付。
• 配置 Agent：進入 Settings → Execution mode，選擇已安裝的本地 Agent CLI 或配置 BYOK 填入 API Key 直連模型。

motion-anything的核心優勢

• 真實網頁動效：產物是可直接運行的 HTML/CSS/JS，非靜態原型，改完寫回文件即可部署。
• 零門檻 AI 創作：設計小白用自然語言描述感覺即可出片，專業用戶能精調關鍵幀。
• 無水印本地渲染：視頻導出無需 ffmpeg、不上雲、不按次收費，全部在瀏覽器完成。
• 生態統一：一套動效模型打通設計、開發、視頻製作與 Agent 協作，告別碎片化工具鏈。

motion-anything的項目地址

• GitHub倉庫：https://github.com/nexu-io/motion-anything

motion-anything的同類競品對比

motion-anything的應用場景

• 產品發佈頁：快速生成帶滾動觸發與懸停動效的產品官網，導出代碼直接部署上線。
• 營銷視頻製作：用多鏡頭模板與逐字動效製作無水印產品宣傳短片，無需藉助外部剪輯工具。
• AI 頁面後期：爲 AI 生成的靜態網頁批量添加交互動效，解決生成頁面一次性無法修改的問題。
• 設計系統沉澱：將動效配方保存爲可移植 Skills，在團隊多項目中統一複用，保持品牌動效一致性。
• 前端開發提效：設計師直接產出 React/CSS 代碼，減少設計稿到開發之間的還原損耗與溝通成本。