Motion.dev Animations Skill

为什么要用

核心特性

自动激活动画/Motion.dev提示
入口、滚动、手势、微动和布局动画图案
Honors默认prefers-reduced-motion
目标60fps + ， < 50KB捆绑包，零布局偏移
GPU加速转换；没有布局道具的干扰

实时演示

实际使用效果

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

0/0

安装

作者仓库 · Claude Skills 官方文档

使用场景

实战用法： Motion.dev Animations Skill

添加一个带有交错的英雄淡入入口

👤 前端开发人员调整着陆页 ⏱ ~15 min beginner

何时使用： 你的英雄感觉是静态的，你想要一个抛光的加载动画。

步骤

描述效果

在英雄的H1、副标题和CTA中添加一个交错的淡入口。60毫秒交错。✓ 已复制

→ 带有motion.div的Motion.dev代码，过渡弹簧，交错延迟
减少动作回退

确保Prefers-reduced-motion完全跳过动画。✓ 已复制

→ useReducedMotion钩子或CSS媒体查询已应用

结果： 在不牺牲无障碍环境的情况下感受活力的英雄。

注意事项

触发布局的动画属性（宽度、顶部） — 改用变换（平移/缩放） — GPU加速，无CLS

搭配使用： magic-ui-mcp

构建滚动触发的显示和视差

👤 前瞻性设计前端开发人员 ⏱ ~25 min intermediate

何时使用： 您的长版登录页面需要在滚动时展开的部分。

步骤

向上滚动时显示

在每个部分进入视口时对其进行动画处理（一次， 30 ％阈值）。✓ 已复制

→ useInView ，一次+金额
视差前景

为装饰性前景SVG添加微妙的视差偏移。✓ 已复制

→ useScroll + useTransform映射scrollYProgress to y

结果： 滚动体验，增加深度而不会分心。

注意事项

导致晕动病的视差 — 保持较小的偏移量，并完全在prefers-reduced-motion下跳过

搭建具有悬停提升功能的可拖动磁卡

👤 交互设计师/前端开发人员 ⏱ ~20 min intermediate

何时使用： 产品卡需要微交互抛光。

步骤

悬停升降机

悬停时：提升4px ，微妙的阴影比例；休假时回弹。✓ 已复制

→ while悬停弹簧； GPU友好的转换
磁阻

使用弹性边界使其可拖动， dragElastic 0.15。✓ 已复制

→ drag + dragConstraints + dragElastic正确设置

结果： 愉快的卡牌互动，没有性能成本。

使用布局重新排序动画列表

👤 前端开发人员构建任务板/画廊 ⏱ ~25 min intermediate

何时使用： 您的列表重新排序让人感到不安；您希望平稳过渡。

步骤

启用项目布局

将布局动画添加到列表项；动画输入/退出。✓ 已复制

→ <motion.li layout> + 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毫秒持续时间的淡入淡出”节拍“让它变得更好”。

安全

权限、密钥、影响范围

凭据存储： 无

数据出站： 技能中无；不涉及网络

生成的动画代码仅与您的评论一样安全—发货前请检查减少动作和布局道具的选择。

故障排查

常见错误与修复

滚动时

检查您正在动画变换，而不是布局道具（宽度/顶部）。谨慎使用意志改变。

验证： Chrome DevTools → Performance → layout shift count

缩小运动时忽略动画

使用useReducedMotion包装并短路动画变体。

验证： System → Motion preferences → reduce motion; reload

添加动作后的大捆绑包

仅从“运动/反应”中导入您需要的内容；避免重新导出所有内容。

验证： Bundle analyzer on the chunks

替代方案