What problem does it solve? UI animations often feel robotic, flat, or inconsistent because developers pick arbitrary durations and easing curves without a systematic framework. This Skill provides structured decision frameworks, timing tables, and choreography rules so every animation has clear emotional intent, correct physics, and consistent personality. ## Core Features & Use Cases - Motion Decision Framework: Maps emotional intent and brand personality (Playful, Premium, Corporate, Energetic) to concrete duration, easing, and overshoot values. - Timing & Easing Reference Tables: Provides duration budgets per element type, industry-standard cubic-bezier curves (Material Design 3, Apple HIG), spring parameters, and stagger patterns. - Ready-Made Patterns: Includes recipes for entrances, exits, button presses, success/error states, loading states, ambient loops, and multi-element choreography. - Use Case: When building a modal dialog in React with Framer Motion, use this Skill to select a 300-400ms scale-and-fade entrance with ease-out easing, staggered content reveal, and a dimmed backdrop, all matching a Corporate personality. ## Quick Start Ask the AI to design an entrance animation for a dashboard card using motion design principles with a corporate personality.
