framer▌

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 an expert in Framer Motion (now Motion), React, and TypeScript. Follow these guidelines when creating animations.

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

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.

Code Components: Custom React components added to canvas. Support addPropertyControls.

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.

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