README

Motion

  An open source animation libraryfor JavaScript, React and Vue



  
  
  
  
  


bash
 React / JavaScript
npm install motion

 Vue
npm install motion-v


 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

jsx
import { motion } from "motion/react"

function Component() {
    return 
}


Get started with Motion for React.

Note: Framer Motion is now Motion. Import from motion/react instead of framer-motion.

 JS

javascript
import { animate } from "motion"

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


Get started with JavaScript.

 Vue

html

    import { motion } from "motion-v"


  


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 wi

Top issues

Discussions