framer-motionlisted

# Motion (Framer Motion) — Animation Skill Production-grade animation patterns for React and Next.js. This skill helps you write correct, performant, accessible animations using the Motion library (v12+). ## Imports Motion rebranded from `framer-motion` to `motion`. Both package names work, but the import path matters: ```tsx // Client Components (standard React) import { motion, AnimatePresence } from "motion/react" // Next.js Server Components — use the client export import * as motion from "motion/react-client" // Legacy import (still works with the framer-motion package) import { motion } from "framer-motion" ``` If the project already uses `framer-motion` as a dependency, keep using `"framer-motion"` imports for consistency. Don't mix import sources. ## Core Concepts ### motion.* Components Every HTML/SVG element has a `motion` counterpart. These accept animation props: ```tsx <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }} /> ``` **Important:** `motion.*` components are client components. In Next.js App Router, either mark the file `"use client"` or wrap them in a client component. ### MotionValues — Animate Without Re-renders `useMotionValue` creates values that update without triggering React re-renders. This is the key to 60fps animations: ```tsx const x = useMotionValue(0) const opacity = useTransform(x, [-200, 0, 200], [0, 1, 0]) return <motion.div style={{ x, opacity }} drag="x" /> ```