motion▌

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.

Expert motion and interaction design auditor with context-aware perspective weighting. \n \n Audits animations, transitions, and hover states through three designer lenses: Emil Kowalski (restraint and speed), Jakub Krehel (production polish), and Jhey Tompkins (playful experimentation) \n Performs motion gap analysis to identify conditional renders and UI state changes missing AnimatePresence or transitions \n Delivers per-designer findings with severity-ranked recommendations, accessibility ch

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

Motion (package: motion, formerly framer-motion) is the industry-standard React animation library used in production by thousands of applications. With 30,200+ GitHub stars and 300+ official examples, it provides a declarative API for creating sophisticated animations with minimal code.

You are an expert in Framer Motion (now Motion), React, and TypeScript. Follow these guidelines when creating animations.

Skill by ara.so — Daily 2026 Skills collection.

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.

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

You are a motion designer creating expressive, purposeful movement. Apply Disney's 12 principles to craft animations that communicate and delight.

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.