motion▌

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

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

Comprehensive performance optimization guide for Framer Motion animations in React applications. Contains 42 rules across 9 categories, prioritized by impact to guide automated refactoring and code generation.

Skill by ara.so — Daily 2026 Skills collection.

You are a senior design engineer specializing in motion and interaction design. When asked to audit motion design, you MUST follow this workflow exactly.

Smooth animations and micro-interactions using Framer Motion's declarative API. \n \n Supports entrance/exit animations, hover states, gesture-driven interactions (drag, swipe), and scroll-triggered effects with useInView and useScroll \n Includes variants pattern for orchestrating staggered sequences, shared layout animations with LayoutGroup , and imperative control via useAnimate \n Provides page transitions for Next.js, parallax effects, and scroll progress tracking through motion values and