用途：为 React 应用添加动画，包括淡入、退出、交错列表、手势、滚动联动、视差、进度指示、布局过渡、共享元素、页面切换、SVG 路径绘制与命令式控制。
主要能力：从 motion/react 导入。核心用法为 initial/animate/transition 实现淡入；AnimatePresence 配合 exit 实现退出（需唯一 key）；variants + staggerChildren 做交错；whileHover/whileTap/whileFocus 处理手势；drag 系列属性处理拖拽；whileInView 与 viewport={{ once: true }} 做滚动触发；useScroll + useTransform 做滚动联动与视差；scrollYProgress + scaleX 做进度条；layout 属性做布局动画（FLIP）；layoutId 做共享元素；LayoutGroup 包裹同级列表；AnimatePresence + key={pathname} 做页面过渡；motion.path 的 pathLength 做 SVG 路径绘制；useSpring + useTransform 做动画计数；useAnimate 返回 [scope, animate] 做命令式控制；motion.create(Component) 包装自定义组件。
使用方式：采用声明式 props 驱动，动画引擎为混合模式（transform/opacity 走 WAAPI，滚动联动走 ScrollTimeline）。包体积从 useAnimate 迷你版 2.3 KB 到完整版 34 KB，可用 LazyMotion + domAnimation + m 组件优化至 4.6 KB。
限制与注意：不要用它处理简单的列表增删（建议 AutoAnimate，3.28 KB），也不要用于 3D（用 Three.js / React Three Fiber）。AnimatePresence 必须保持挂载，条件内容放在其内部，且每个直接子元素需唯一 key。避免与 Tailwind transition-* 类混用导致卡顿。不要再从 framer-motion 导入。超过 50 项列表需配合 react-window 或 @tanstack/react-virtual 虚拟化。Next.js App Router 需加 "use client" 或使用 motion/react-client。避免直接动画 width/height，改用 layout 或 transform: scale。用 MotionConfig reducedMotion="user" 处理减弱动效偏好。