gem-hunter

# React / JavaScript
npm install motion

# Vue
npm install motion-v

1. Why Motion?
2. 🍦 Platforms
3. 🎓 Examples
4. 🎨 Motion Studio
5. 🤖 Using Motion with AI
6. ⚡️ Motion+
7. 👩🏻‍⚖️ License
8. 💎 Contribute
9. ✨ 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-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.

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

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+

• 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.

Become a sponsor

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.

• OlegWock
• Lambert Weller
• Jake LeBoeuf