Motion.dev Animations Skill

為什麼要用

核心特性

根據動畫/Motion.dev 提示自動啟動
入口、滾動、手勢、微和佈局動畫模式
預設情況下，榮譽更喜歡減少運動
目標 60fps+、<50KB 捆綁、零佈局偏移
GPU 加速轉換；版面配置道具不會出現卡頓

即時演示

實際使用效果

motion-dev-animations-skill.replay ▶ 就緒

0/0

安裝

作者儲存庫 · Claude Skills 官方文件

使用場景

實戰用法： Motion.dev Animations Skill

增加一個帶有交錯的英雄淡出入口

👤 前端開發人員調整登陸頁面 ⏱ ~15 min beginner

何時使用： 你的英雄感覺是靜態的，你想要一個精美的載入動畫。

步驟

描述一下效果

為英雄的 H1、小標題和 CTA 增加交錯淡出入口。 60ms 錯開。✓ 已複製

→ Motion.dev 程式碼與motion.div、過渡彈簧、透過交錯延遲
減少運動後備

確保prefers-reduced-motion 乾淨地跳過動畫。✓ 已複製

→ useReducedMotion 掛鉤或應用 CSS 媒體查詢

結果： 一個在不犧牲可訪問性的情況下感覺還活著的英雄。

注意事項

觸發佈局的動畫屬性（寬度、頂部） — 使用變換（平移/縮放）取代 — GPU 加速，無 CLS

搭配使用： magic-ui-mcp

建立滾動觸發的顯示和視差

👤 設計前沿的前端開發人員 ⏱ ~25 min intermediate

何時使用： 您的長格式登陸頁需要滾動展開的部分。

步驟

在捲軸上顯示

當每個部分進入視口時對其進行動畫處理（一次，30% 閾值）。✓ 已複製

→ useInView 一次 + 金額
視差前景

為裝飾性前景 SVG 添加微妙的視差偏移。✓ 已複製

→ useScroll + useTransform 將scrollYProgress 對應到y

結果： 滾動體驗可增加深度而不會分散注意力。

注意事項

導致暈車的視差 — 保持較小的偏移量並在首選減少運動下完全跳過

建造帶有懸停升降裝置的可拖曳磁卡

👤 互動設計師/前端開發人員 ⏱ ~20 min intermediate

何時使用： 產品卡片需要微互動打磨。

步驟

懸停升降機

懸停時：抬起 4px，微妙的陰影比例；休假回來。✓ 已複製

→ while 與 spring 懸停； GPU 友善的變換
磁力阻力

使其可透過彈性邊界拖動，dragElastic 0.15。✓ 已複製

→ 正確設定drag+dragConstraints+dragElastic

結果： 令人愉快的卡片交互，無需任何性能成本。

使用佈局動畫清單重新排序

👤 前端開發人員建構任務板/畫廊 ⏱ ~25 min intermediate

何時使用： 你的清單重新排序感覺很不和諧；你想要平滑的過渡。

步驟

啟用專案佈局

為清單項目新增版面配置動畫；也動畫進入/退出。✓ 已複製

→ <motion.li 佈局> + AnimatePresence
減少運動

在「prefers-reduced-motion」下停用佈局動畫。✓ 已複製

→ 有條件適用；為有需求的使用者即時重新訂購

結果： 重新排序感覺物理但尊重使用者的喜好。

組合

與其他 MCP 搭配，撬動十倍槓桿

motion-dev-animations-skill + magic-ui-mcp

Magic UI 用於預先建置元件，motion.dev 用於自訂位

使用 Magic UI 的選取框作為標誌； Motion.dev 用於下面的自訂捲動視差。✓ 已複製

motion-dev-animations-skill + claude-design-auditor-skill

審核運動以減少運動支持

添加動畫後，使用scope=motion 進行審核以捕捉減少運動的回歸。✓ 已複製

motion-dev-animations-skill + claude-code-design-skills

Figma 到程式碼 + 動畫在一個流程中

轉換Figma框架；然後添加指定的懸停和進入動畫。✓ 已複製

工具

此 MCP 暴露的能力

工具	輸入參數	何時呼叫	成本
motion-dev (SKILL)	describe the animation (element + intent + constraints)	任何時候你想要動畫程式碼，尤其是。具有可訪問性和效能限制	0

成本與限制

運行它的成本

API 配額: 沒有任何
每次呼叫 Token 數: 代碼較小；僅當轉儲複雜組件時才大
費用: 自由的
提示: 嚴格描述動畫意圖 - “淡出 60 毫秒交錯，200 毫秒持續時間”節拍“讓它變得漂亮”。

安全

權限、密鑰、影響範圍

憑證儲存： 沒有任何

資料出站： 沒有來自技能；不涉及網絡

生成的動畫程式碼的安全性取決於您的審查——在發貨前檢查簡化動作和佈局道具選擇。

故障排查

常見錯誤與修復

滾動時卡頓

檢查您正在動畫變換，而不是佈局道具（寬度/頂部）。謹慎使用 will-change。

驗證： Chrome DevTools → Performance → layout shift count

減少運動時忽略動畫

用 useReducedMotion 包裝並短路動畫變體。

驗證： System → Motion preferences → reduce motion; reload

加入運動後的大束

僅從“motion/react”匯入您需要的內容；避免重新出口所有東西。

驗證： Bundle analyzer on the chunks

替代方案