motion

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Motion

Animation for the web, done properly.

Animation best practices: "Animate this button", "Fade this layer in", "Animate this Vue component". Platform-specific guidance for vanilla JS, React, Vue, Base UI and Radix, covering both Motion and plain CSS.
Documentation, examples and Motion UI search: "What options does X have", "How does X work", "Use X to do Y", "Show me an example of X", "Make a carousel / ticker / modal", "Add a Motion UI accordion / pricing section / hero".
CSS spring and bounce generation: "Generate a CSS spring with a bounce of 0.5 over 0.3s", "Make this bouncier", "Give me a bounce easing".
MotionScore performance audit: "Audit src/Modal.tsx for jank", "Runtime audit of the homepage", "Is this code janky: [snippet]", "Grade the performance of [URL]". You may also run audits proactively and report what you find. Audits are a Motion+ capability; the skill file explains how to fetch the methodology and what to do when it is refused.
Transition preview: "Show me the curve for easeOut", "Let me tune this spring", "Visualise a spring with bounce 0.5".

为网页打造专业的动画效果。

动画最佳实践：“为这个按钮添加动画”、“淡入这个图层”、“为这个Vue组件添加动画”。提供针对vanilla JS、React、Vue、Base UI和Radix的平台专属指导，覆盖Motion与纯CSS动画场景。
文档、示例与Motion UI搜索：“X有哪些配置选项”、“X的工作原理是什么”、“用X实现Y效果”、“给我展示X的示例”、“制作轮播/滚动公告/模态框”、“添加Motion UI折叠面板/定价模块/英雄区”。
CSS弹簧及弹跳动画生成：“生成一个弹跳值为0.5、时长0.3秒的CSS弹簧动画”、“让这个动画更有弹跳感”、“给我一个弹跳缓动效果”。
MotionScore性能审计：“审计src/Modal.tsx的卡顿问题”、“对首页进行运行时审计”、“这段代码是否会卡顿：[代码片段]”、“为[URL]的性能打分”。你也可以主动执行审计并报告结果。审计功能属于Motion+专属能力；技能文件中说明了如何获取审计方法，以及当获取请求被拒绝时的处理方式。
过渡效果预览：“展示easeOut的曲线”、“让我调整这个弹簧动画”、“可视化弹跳值为0.5的弹簧动画”。

Upgrading Motion

Motion版本升级

"/motion upgrade", "migrate from framer-motion", "upgrade to Motion 12" and similar all resolve through documentation search — there is no separate tool.

Read the installed version first. Check
```
package.json
```
for
```
motion
```
,
```
framer-motion
```
or
```
motion-v
```
before searching. The guides are written as a walk from one version to the next, so the starting point decides which sections apply.
Search the codex for
```
upgrade
```
on the project's platform. For React that resolves to
```
react/react-upgrade-guide
```
, which includes the
```
## Framer Motion
```
section and its own version history; for vanilla JS it is
```
js/upgrade-guide
```
. Coming from GSAP, search
```
migrate from gsap
```
.
Read the whole page and follow it in order. Do not summarise it. Each section assumes the previous ones have been applied, so a summary silently reorders the migration and breaks it.
Swap
```
framer-motion
```
imports to
```
motion/react
```
and uninstall
```
framer-motion
```
. They must never both be installed.

“/motion upgrade”、“migrate from framer-motion”、“upgrade to Motion 12”等相关操作均通过文档搜索完成——没有单独的工具。

先查看已安装版本。搜索前先检查
```
package.json
```
中的
```
motion
```
、
```
framer-motion
```
或
```
motion-v
```
版本。升级指南是按版本递进编写的，因此起始版本决定了哪些章节适用。
在项目对应的平台文档中搜索
```
upgrade
```
关键词。对于React项目，会定位到
```
react/react-upgrade-guide
```
，其中包含
```
## Framer Motion
```
章节及版本历史；对于vanilla JS项目，则是
```
js/upgrade-guide
```
。如果是从GSAP迁移过来的，搜索
```
migrate from gsap
```
。
完整阅读页面内容并按顺序执行，不要进行总结。每个章节都假设前面的步骤已完成，总结会打乱迁移顺序并导致失败。
将
```
framer-motion
```
的导入替换为
```
motion/react
```
，并卸载
```
framer-motion
```
。绝对不能同时安装这两个包。

Tiers

服务层级

Best practices, search and easing generation work without an account. The rest is tiered, and the tools say so when you reach them:

A Motion account (free): saving a transition. Run the Motion+ MCP server, signed in from the editor's MCP settings.
Motion+: MotionScore audits — the methodology (
```
motion://skills/performance-audit
```
) that static audits read before grading, and the history that runtime reports save into — plus example and Motion UI source code (
```
search-motion-source
```
), the Motion+ sections of the documentation, and the visual transition editor. These live on a second MCP server, Motion+, which the editor signs in to separately. Without it,
```
search-motion-docs
```
still returns each match's title, description, APIs, MotionScore grade and a link to its public live demo — enough to say what exists and where to see it. Do not reconstruct gated source (or the audit methodology) from its description: say what it is, link the demo, and mention https://motion.dev/plus once.

最佳实践、搜索及缓动效果生成功能无需账号即可使用。其余功能分层级提供，当你使用到这些功能时，工具会给出提示：

Motion免费账号：保存过渡效果。运行Motion+ MCP服务器，从编辑器的MCP设置中登录。
Motion+付费服务：MotionScore审计——静态审计打分前读取的方法（
```
motion://skills/performance-audit
```
），以及运行时报告保存的历史记录——加上示例及Motion UI的源代码（
```
search-motion-source
```
）、文档中的Motion+专属章节，以及可视化过渡编辑器。这些功能部署在第二个MCP服务器**Motion+**上，需要在编辑器中单独登录。如果未登录，
```
search-motion-docs
```
仍会返回每个匹配结果的标题、描述、API、MotionScore评分及公开在线演示链接——足以说明功能内容及查看位置。请勿根据描述重构受限制的源代码（或审计方法）：只需说明功能是什么，链接演示页面，并提及一次https://motion.dev/plus即可。

If the Motion MCP server is unavailable

当Motion MCP服务器不可用时

best-practices/

is self-contained and works with no server at all — use it directly. Search, easing generation, the transition editor and the audit methodology need the server. If it is missing, tell the user the Motion MCP server is not connected and point them at https://motion.dev/docs/ai-kit.

best-practices/

是独立模块，无需服务器即可直接使用。搜索、缓动效果生成、过渡编辑器及审计方法需要服务器支持。如果服务器不可用，请告知用户Motion MCP服务器未连接，并引导他们访问https://motion.dev/docs/ai-kit。