# React / JavaScript
npm install motion
# Vue
npm install motion-v- Why Motion?
- 🍦 Platforms
- 🎓 Examples
- 🎨 Motion Studio
- 🤖 Using Motion with AI
- ⚡️ Motion+
- 👩🏻⚖️ License
- 💎 Contribute
- ✨ Sponsors
- Simple API: First-class React, JavaScript, and Vue packages.
- Hybrid engine: Power of JavaScript combined with native browser APIs for 120fps, GPU-accelerated animations.
- Production-ready: TypeScript, extensive test suite, tree-shakable, tiny footprint. Batteries included: Gestures, springs, layout transitions, scroll-linked effects, timelines.
Motion is available for React, JavaScript and Vue.
import { motion } from "motion/react"
function Component() {
return <motion.div animate={{ x: 100 }} />
}Get started with Motion for React.
Note: Framer Motion is now Motion. Import from motion/react instead of framer-motion.
import { animate } from "motion"
animate("#box", { x: 100 })Get started with JavaScript.
<script>
import { motion } from "motion-v"
</script>
<template> <motion.div :animate={{ x: 100 }} /> </template>Get started with Motion for Vue.
Browse 450+ official examples, with copy-paste code that'll level-up your animations whether you're a beginner or an expert.
Over 110 examples come with a full step-by-step tutorial on their example page.
Give your coding agent current Motion docs:
- Agent skill:
npx motion-aiinstalls the free, MIT-licensed/motionskill and sets up Motion's MCP servers for Claude Code, Cursor, Amp, OpenCode, Gemini CLI and Copilot. Source on GitHub. - MCP server:
https://mcp.motion.devsearches the Motion docs and example metadata. It is free and needs no account. - llms.txt: motion.dev/llms.txt indexes every docs page. Motion+ pages are labelled as paid, with their install and import.
Motion+ adds example and Motion UI source, MotionScore performance audits and CSS spring generation for your agent.
A visual animation editor for your website. Edit keyframes, easing curves and springs on a live timeline, or describe changes to the Ultramotion agent, then apply the result straight to your code with Cursor, Codex or Claude.
A one-time Personal licence with lifetime updates, or an annual per-seat Business plan for teams:
- 450+ examples
- 110+ tutorials
- Premium APIs like Cursor and Ticker
- Transition editor for Cursor and VS Code
- AI Kit: example and Motion UI source, MotionScore audits and CSS springs for your agent
- Private Discord
- Early access content
- Motion is MIT licensed.
- Want to contribute to Motion? Our contributing guide has you covered.
Motion is sustainable thanks to the kind support of its sponsors.
Motion powers the animations for all websites built with Framer, the web builder for creative pros. The Motion website itself is built on Framer, for its delightful canvas-based editing and powerful CMS features.
Motion drives the animations on the Cursor homepage, and is working with Cursor to bring powerful AI workflows to the Motion examples and docs.
