Motion (Framer Motion) Best Practices

Package renamed: import from motion/react (not framer-motion). API is identical.

Basic Animations

import { motion } from "motion/react";

// GPU-accelerated properties: x, y, scale, rotate, opacity
<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.3 }}
/>

// Keyframes — animate through multiple values
<motion.div animate={{ scale: [1, 1.2, 1] }} transition={{ duration: 0.4 }} />