motiondivision/motion

项目用途

Motion 是一个开源动画库，同时提供 React、JavaScript 和 Vue 的独立包（README lines 1–21）。它把网页动效的常用能力收进一套 API：手势、弹簧、布局过渡、滚动联动和时间线（Why Motion）。

引擎把 JavaScript 与浏览器原生 API 结合，项目称其可达到 120fps 的 GPU 加速动画；代码用 TypeScript 编写，可 tree-shaking，并配有较完整的测试套件（README lines 34–40）。

它解决的是前端开发者自己实现动画插值、物理弹簧和布局动画调度的问题，适合已经能渲染 React、Vue 或 DOM 组件的开发者，用来给界面加交互与过渡。

需要留意 Framer Motion 已更名为 Motion：React 版本改从 motion/react 导入，不再使用 framer-motion（README lines 45–58）。

快速使用

准备一个 JavaScript 前端项目，然后按框架安装对应包。

React / JavaScript：

npm install motion

Vue：

npm install motion-v

（README lines 14–20）

React 中导入 motion，在 motion.* 元素上用 animate 属性给出目标值（README lines 47–53）：

import { motion } from "motion/react"

function Component() {
    return <motion.div animate={{ x: 100 }} />
}

纯 JavaScript 中向 animate() 传选择器与目标值（README lines 61–65）：

import { animate } from "motion"

animate("#box", { x: 100 })

Vue 中使用 motion-v 包，在 motion.div 上绑定 animate（README lines 71–77）：

<script>
    import { motion } from "motion-v"
</script>

<template> <motion.div :animate={{ x: 100 }} /> </template>

元素会沿 x 轴移动 100 像素。官方分别提供 React、JavaScript 和 Vue 的入门文档；继续学习可浏览 450+ 个官方示例，其中 110 多个附带逐步教程。

使用约束

核心库采用 MIT 许可证（README lines 117–120）。运行时包、示例站以及下文提到的 MCP 工具属于免费范围。

部分周边内容需要购买 Motion+：450+ 示例、110+ 教程、Cursor 与 Ticker 等高级 API、Cursor 与 VS Code 的过渡编辑器、AI Kit 源码、私有 Discord 和抢先内容。授权方式为一次性个人许可（含终身更新）或按席位年付的商业方案（README lines 103–116）。Motion Studio 是独立产品，可在实时时间线上调整关键帧、缓动和弹簧，或通过 Cursor、Codex、Claude 把修改写回代码，需从独立入口访问（README lines 97–102）。

平台按包划分：React/JavaScript 用 motion，Vue 用 motion-v，跨包导入无法使用。README 未列出标准 JavaScript 前端工具链之外的环境要求。

AI 工具

项目还提供面向编程 Agent 的免费 MIT 资源（README lines 87–96）：

• npx motion-ai 安装 /motion 技能，并为 Claude Code、Cursor、Amp、OpenCode、Gemini CLI 和 Copilot 配置 Motion 的 MCP 服务。
• https://mcp.motion.dev 用于检索 Motion 文档和示例元数据，免费且无需账号。
• motion.dev/llms.txt 索引全部文档页，其中 Motion+ 页面会标注为付费。

HotRepo 点评

Motion 并非新项目：仓库创建于 2018 年 11 月，目前约 3.48 万 Star、1490 个 Fork。在 2026-11-01 的 TypeScript 日榜记录中，它新增 57 Star，最佳名次为第 19 位。这只是一天的快照，但说明项目在 TypeScript 生态里仍有稳定的日常关注度，而非突然爆发。

在这个体量上，值得注意的不只是库本身，还有围绕它铺开的配套：React、JavaScript、Vue 三个独立包，规模较大的示例库，以及把最新文档接入 Cursor 和 Claude Code 的 Agent 工具包。已经在用 React 或 Vue 的团队可以直接采用免费的 MIT 运行时；Motion+ 属于可选项，主要面向需要高级 API、编辑器集成或完整示例源码的用户。