# Motion: the framer-motion import is gone, the folder name is still in the Makefile

> Motion is the MIT-licensed animation library for JavaScript, React and Vue, and it is Framer Motion under a new name and a new import path. The library ships as two npm packages, motion and motion-v, its footprint is enforced by a bundle size check that runs on every install, its releases are published with lerna rather than tagged on GitHub, and a paid tier sits beside the free library selling example source, an agent kit and a transition editor.

**motiondivision/motion** — A modern animation library for React and JavaScript

- Repository: https://github.com/motiondivision/motion
- Website: https://motion.dev
- Stars: 33,790 · Forks: 1,381
- Language: TypeScript
- License: MIT
- Published: 2026-08-17 · Updated: 2026-08-18 · Language: en
- Canonical page: https://hysenlabs.com/projects/motiondivision-motion

## Framer Motion is now Motion, and the build still refers to the old name

The one piece of documentation a returning user most needs is a single note: Framer Motion is now Motion, and you should import from `motion/react` instead of `framer-motion`. That is a breaking change with a one-line migration, and it is the kind that a dependency updater will surface as a wall of unresolved imports rather than a warning.

The rename is not finished in the repository, and that is worth knowing before you go looking for a problem. The root package.json is still named motion-one and is private, so the monorepo identifies itself by the older name. The Makefile still builds packages/framer-motion, both in its watch target and in the file it watches for change before running an install. The contributor guide link in the README points at a master branch path even though the default branch is main.

None of that affects the published packages, which are `motion` and `motion-v`. All of it means that if you are reading the build to understand how a release is produced, the old name is where you will lose time.

## Two npm packages, three import paths, and a shared animate primitive

Installation is two commands, and the second one is not optional for Vue users:

```bash
# React / JavaScript
npm install motion

# Vue
npm install motion-v
```

The import paths differ by framework. React and JavaScript both come from the motion package, but from different entry points, with `motion/react` for React:

```jsx
import { motion } from "motion/react"

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

while the JavaScript API is a plain animate call on a selector:

```javascript
import { animate } from "motion"

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

Vue uses the second package, motion-v, and binds the animation as a prop on the element rather than as a component attribute, so the same idea reads differently:

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

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

A project with a React app and a Vue island therefore installs two packages and uses two animation primitives, which is the practical cost of first-class support for both.

## The tiny footprint claim is a build gate, not a sentence in a README

The feature list calls the library tree-shakable with a tiny footprint. In the root package.json there is a script that turns that into something enforced: measure runs the workspace measure task with the force flag and then runs a bundlesize script from the dev directory. More importantly, the prepare script runs build and measure together, and prepare is what fires on install.

So a contributor who installs the repository has already built it and measured it, and a pull request that pushes the bundle over the budget fails before anyone reviews the code.

That is a meaningful difference from a project that simply publishes a size in its README, and it is worth knowing because it constrains you. If you add a dependency or an import that pulls in more of the library than you need, the build tells you rather than your users. The trade is build time on every install, and a codebase where the dependency surface is treated as a budget that a script can spend.

## Releases are published with lerna, and the repository has no tags for them

The repository has no GitHub releases at all, so the changelog you would look for on the releases page is not there. What is there is a publishing pipeline in the root package.json.

A normal release runs generate-changelog-csv, then the Playwright suite, then lerna publish from-package, then a push of the site content. An alpha runs a build and then lerna publish from-package with the canary flag and an alpha preid. The version script is just an install plus staging the lockfile, and a separate script pushes to the site, with two Slack notification scripts split by NODE_ENV so the test notification does not page the channel.

The consequence for a consumer is that the npm tags are the release channel and the site is the changelog. There is no tag in the repository to diff against, so if you need to know what changed between two installed versions, the package on npm and the site's generated changelog are where the answer lives, not the git history.

## The library is MIT; the examples, the UI source and the agent kit are the paid tier

The licence section is one line: Motion is MIT licensed. There is no dual licence and no enterprise edition of the runtime, which is the important part for anyone redistributing it.

The paid part sits beside it as a product called Motion+, sold as a one-time Personal licence with lifetime updates or an annual per-seat Business plan for teams. What it contains is worth reading precisely, because the list is not simply more of the same. It includes 450+ examples and 110+ tutorials, premium APIs such as Cursor and a Ticker, a transition editor for Cursor and VS Code, an AI Kit of example and Motion UI source with MotionScore performance audits and CSS spring generation, a private Discord, and early access content.

So the line is between the library you run and the material you copy from. The free README already advertises 450+ official examples online, over 110 of which come with a full step-by-step tutorial, so the examples are reachable; what the paid tier adds is their source, the Motion UI source, and the agent tooling. If your use is running the library, the licence is not the obstacle. If your use is lifting a component into a product you sell, that is the question to ask.

## The documentation is published for coding agents, not only for people

There is a section on using Motion with AI, and it is unusually concrete for a library README. `npx motion-ai` installs a free, MIT-licensed skill named /motion and sets up Motion's MCP servers for Claude Code, Cursor, Amp, OpenCode, Gemini CLI and Copilot. There is a hosted MCP server at mcp.motion.dev that searches the Motion docs and example metadata, free and needing no account. And there is an llms.txt at motion.dev that indexes every documentation page.

The detail in that last item is the interesting one. The Motion+ pages are labelled as paid, with their install and import, which means the index is honest about what an agent will and will not find. An agent pointed at that file will give you the free library's documentation and stop short of the paid material, rather than quoting a page you cannot open.

Motion Studio is the visual half of the same story. It is a visual animation editor for your website where you edit keyframes, easing curves and springs on a live timeline, or describe the change to an agent called Ultramotion, then apply the result straight to your code with Cursor, Codex or Claude. For a library whose hardest part is a curve, having the curve editable by hand and then exportable as code is a real answer to a real problem.

## The test stack is browser-level, and GSAP is a dev dependency

The scripts tell you what kind of project this is. test is a workspace task, test-ci runs with no cache, and test-playwright does a full build before running Playwright, which means the end-to-end suite runs against built bundles rather than source. There is a playwright.config.ts at the root and a tests/ directory, alongside a .circleci/ directory for the pipeline.

Two details in the dev dependencies are worth noting. There is @playwright/test at 1.48 or newer, and there is @gsap/react, which is the React wrapper for GSAP. A competing animation library in your dev dependencies is a comparison tool, and for an animation library the only meaningful comparison is running the same animation through both and looking at the result, which is a browser-level test.

The Makefile closes the loop. It comes from a shared file in another repository, it uses a mutex file so several source directories can be built in parallel, its clean target removes node_modules and runs git clean on ignored files, and its check-status target asks the GitHub API for the build status of the current commit. The last one is a small convenience that tells you whether CI has finished before you push anything else.

## Conclusion

Use Motion if you are starting an animation layer now, because the current package names, the motion/react import path and the Vue package are what you will be documenting, and the library is MIT licensed with a bundle size gate that keeps it small. Do not upgrade an existing Framer Motion codebase without planning for the import path change, and do not assume the free tier includes the example source, because that sits in the paid Motion+ plan. Before you start: install the package that matches your framework, motion for React and JavaScript or motion-v for Vue; run the measure script, because the footprint claim is enforced rather than asserted; and if you are feeding a coding agent, note that npx motion-ai sets up the documented MCP route while the llms.txt index labels the paid pages as paid, so the agent will not hand you the tier you have not bought.

## FAQ

### What is the Motion animation library?

It is an open source animation library for JavaScript, React and Vue, MIT licensed, with first-class packages for each. The project describes a hybrid engine combining JavaScript with native browser APIs for 120fps GPU-accelerated animations, written in TypeScript, tree-shakable, with gestures, springs, layout transitions, scroll-linked effects and timelines included.

### Is Framer Motion the same as Motion?

Yes. The README states that Framer Motion is now Motion, and that you should import from `motion/react` instead of `framer-motion`. The repository still carries older names in places, since the root package.json is named motion-one and the Makefile still builds a framer-motion package directory.

### How do I install Motion?

Run `npm install motion` for React or JavaScript, or `npm install motion-v` for Vue. React code imports from `motion/react`, plain JavaScript imports the animate function from `motion`, and Vue imports from `motion-v`. The package is also available through jsDelivr.

### Does Motion have a paid tier?

The library itself is MIT licensed with no paid runtime. A separate Motion+ product is sold as a one-time Personal licence with lifetime updates or an annual per-seat Business plan, adding 450+ examples, 110+ tutorials, premium APIs such as Cursor and Ticker, a transition editor for Cursor and VS Code, an AI Kit with example and Motion UI source, MotionScore audits and CSS spring generation, a private Discord and early access content.

### Can I give a coding agent the Motion documentation?

Yes. `npx motion-ai` installs a free, MIT-licensed /motion skill and sets up Motion's MCP servers for Claude Code, Cursor, Amp, OpenCode, Gemini CLI and Copilot, and a hosted server at mcp.motion.dev searches the docs and example metadata with no account. The index at motion.dev/llms.txt covers every documentation page and labels the Motion+ pages as paid.

### What is Motion Studio?

It is a visual animation editor for your website, where you edit keyframes, easing curves and springs on a live timeline, or describe changes to an agent called Ultramotion and then apply the result straight to your code with Cursor, Codex or Claude.

## Sources

- [Official documentation](https://motion.dev)
- [Official README](https://github.com/motiondivision/motion#readme)
- [Project repository](https://github.com/motiondivision/motion)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/motiondivision-motion