Framer Motion vs Motion: what is the difference?

Searches for "framer motion vs motion" come from developers who see both names in tutorials. There is only one library.

How to upgrade

npm uninstall framer-motion
npm install motion

// before
import { motion, AnimatePresence } from 'framer-motion';
// after
import { motion, AnimatePresence } from 'motion/react';

The APIs are the same, so most projects only change the import. Read the upgrade guide on motion.dev if you are jumping several major versions, because some older APIs changed over time.

Why the name changed

Motion now runs as an independent open-source project with sponsors, including Framer. It also has a vanilla JavaScript API for non-React sites, which made the React-only name a poor fit.

Next.js App Router

Motion components need the browser, so either mark the file with "use client" or use import * as motion from "motion/react-client" in a server component, as the Motion installation docs describe.