motiondivision/motion

What Motion Does

Motion is an open-source animation library for JavaScript, React and Vue, with packages for each platform (README lines 1–21). It gives front-end developers a unified API for motion on the web: gestures, springs, layout transitions, scroll-linked effects and timelines (Why Motion).

The engine combines JavaScript with native browser APIs, which the project presents as a route to 120fps GPU-accelerated animation. The codebase is TypeScript, tree-shakable, and backed by an extensive test suite (README lines 34–40).

This is a tool for building interfaces, not an animation ready-made for playback. Anyone comfortable rendering React, Vue or DOM components can use it to add interaction and transitions without writing their own physics or animation scheduler.

Note that Framer Motion is now Motion: React imports come from motion/react, not framer-motion (README lines 45–58).

Get Started

You need a JavaScript project and a package manager. Pick the package for your framework.

React / JavaScript:

npm install motion

Vue:

npm install motion-v

(README lines 14–20)

For React, import motion and pass animation values through the animate prop on a motion.* element (README lines 47–53):

import { motion } from "motion/react"

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

In plain JavaScript, call animate() with a selector and target values (README lines 61–65):

import { animate } from "motion"

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

In Vue, use the motion-v package and bind animate on a motion.div (README lines 71–77):

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

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

The rendered element moves 100 pixels along x. Official starting guides are available for React, JavaScript and Vue. To go further, the site hosts 450+ examples, over 110 of which include step-by-step tutorials.

Usage Constraints

The core library is MIT licensed (README lines 117–120). The free tier includes the runtime packages, the examples site and the MCP tooling described below.

Some surrounding features are paid under Motion+: 450+ examples, 110+ tutorials, premium APIs such as Cursor and Ticker, a transition editor for Cursor and VS Code, AI Kit source access, a private Discord and early-access content. Motion+ is sold as either a one-time Personal licence with lifetime updates or an annual per-seat Business plan (README lines 103–116). Motion Studio — a visual timeline editor for keyframes, easing and springs that applies changes to code via Cursor, Codex or Claude — is a separate product reached through its own site (README lines 97–102).

Platform support is split by package: motion for React/JavaScript and motion-v for Vue, so importing from the wrong package will not work. No requirements beyond a standard JavaScript front-end toolchain are documented in the README.

AI Tooling

The project also ships free, MIT-licensed material for coding agents (README lines 87–96):

• npx motion-ai installs the /motion skill and configures Motion's MCP servers for Claude Code, Cursor, Amp, OpenCode, Gemini CLI and Copilot.
• https://mcp.motion.dev searches Motion docs and example metadata, with no account required.
• motion.dev/llms.txt indexes every docs page; Motion+ pages are marked as paid.

HotRepo's take

Motion is not a newcomer: the repository dates to November 2018 and has about 34.8k stars and 1.5k forks. On the 2026-11-01 TypeScript daily list it recorded 57 new stars and a best position of 19. That is a single-day snapshot, so it shows the project still attracting steady daily attention within the TypeScript ecosystem rather than a sudden spike.

What distinguishes the repository at that scale is the breadth of the offering around the library: separate React, JavaScript and Vue packages, a large examples catalogue, and an agent-facing kit that plugs current docs into Cursor and Claude Code. Teams already standardizing on React or Vue can adopt the free MIT runtime; the paid Motion+ layer is optional and matters mainly for those who want the premium APIs, editor integration or full example source.