motion▌

Motion (formerly Framer Motion) is a production-ready animation library for React and JavaScript that enables declarative, performant animations with minimal code. It provides motion components that wrap HTML elements with animation superpowers, supports gesture recognition (hover, tap, drag, focus), and includes advanced features like layout animations, exit animations, and spring physics.

GPU-accelerated animation library for JavaScript, React, and Vue with gestures, springs, and layout transitions. \n \n Supports motion components (motion.div, motion.svg), variants, transitions with spring physics, and scroll-linked effects \n Includes gesture handlers for drag, pan, tap, press, hover, and focus interactions \n Provides layout animations with AnimatePresence, LayoutGroup, and drag-to-reorder capabilities \n Offers motion values, transforms, and imperative animation controls via

React animation library with gestures, scroll effects, layout transitions, and spring physics. \n \n Supports drag-and-drop, hover/tap feedback, scroll-triggered reveals, parallax, and FLIP layout animations with hardware acceleration \n Three bundle options: 2.3 KB mini (useAnimate), 4.6 KB optimized (LazyMotion), or 34 KB full component library \n Requires \"use client\" directive in Next.js App Router; works without modification in Pages Router and Vite \n 35+ documented issues with solutions

Expert motion design guidance for creating compelling, engaging videos. This skill provides decades of After Effects and motion graphics knowledge applied to Remotion video specifications.

Implement all 12 Disney animation principles using Framer Motion's declarative React API.

Apply Disney's 12 animation principles to After Effects, Premiere Pro, and video motion design.

Read device sensor data -- accelerometer, gyroscope, magnetometer, pedometer, and activity recognition -- on iOS and watchOS. CoreMotion fuses raw sensor inputs into processed device-motion data and provides pedometer/activity APIs for fitness and navigation use cases. Targets Swift 6.3 / iOS 26+.

Hardware-accelerated animation library for Vue 3 and Nuxt with declarative motion components and gesture support. \n \n Provides Motion component with initial/animate/exit states, spring physics, and hardware-accelerated transforms \n Supports gesture animations (whileHover, whilePress, whileDrag) and scroll-linked effects with viewport detection \n Includes composables for manual animation control: useMotionValue, useSpring, useTransform, useScroll, and animate() \n Minimal bundle size (~200 to

Audit and fix animation performance issues including layout thrashing, compositor properties, and scroll-linked motion. \n \n Covers nine rule categories by priority: never patterns, mechanism selection, measurement batching, scroll-linked motion, paint optimization, layer promotion, blur/filter constraints, view transitions, and tool boundaries \n Provides file-level review mode that identifies violations with exact line quotes, impact explanation, and concrete code fixes \n Includes FLIP-style