Motion

Package: motion ^13 (formerly framer-motion). Import from motion/react, not framer-motion.

Folder major tracks the npm motion package, not a skill-file revision. This repo may not list motion in package.json (CSS/tw-animate-css first); keep motion-v13 so pnpm add motion stays aligned. Do not invent -v1 for libraries that have an npm major.

When

Use for drag, scroll-linked, layout, gestures, shared-element transitions. Prefer CSS/tw-animate-css first (see @.cursor/rules/frontend/design.mdc).

Install

pnpm add motion — import { motion, AnimatePresence } from "motion/react".

Motion 13 dropped @emotion/is-prop-valid as an optional dependency. If styled motion components leak CSS-in-JS props to the DOM, inject isValidProp via MotionConfig or compose motion.create(StyledDiv). See https://motion.dev/docs/react-upgrade-guide

Depth