motiondivision / motion

Motion 
 An open source animation library for JavaScript, React and Vue
 [code] 
## Table of Contents
1. Why Motion?
2. 🍦 Platforms
3. 🎓 Examples
4. 🎨 Motion Studio
4. 🤖 Using Motion with AI
5. ⚡️ Motion+
6. 👩🏻‍⚖️ License
7. 💎 Contribute
8. ✨ Sponsors
## Why Motion?
- **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.
## 🍦 Platforms
Motion is available for React, JavaScript and Vue.
### React
 [code] 
Get started with Motion for React.
**Note:** Framer Motion is now Motion. Import from `motion/react` instead of `framer-motion`.
### JS
 [code] 
Get started with JavaScript.
### Vue
 [code] 
Get started with Motion for Vue.
## 🎓 Examples & tutorials
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.
## 🤖 Using Motion with AI
Give your coding agent current Motion docs:
- **Agent skill:** `npx motion-ai` installs the free, MIT-licensed `/motion` skill 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.dev` searches 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.
## 🎨 Motion Studio
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.
Explore Motion Studio
## ⚡️ Motion+
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**
Get Motion+
## 👩🏻‍⚖️ License
- Motion is MIT licensed.
## 💎 Contribute
- Want to contribute to Motion? Our contributing guide has you covered.
## ✨ Sponsors
Motion is sustainable thanks to the kind support of its sponsors.
Become a sponsor
### Partners
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 wit