animation-designer

What problem does it solve? UI animations often feel robotic, abrupt, or lifeless because developers use default linear timing or untuned springs. This Skill provides a craft-focused system of easing curves, spring configurations, durations, and micro-interaction patterns so animations feel physically plausible and intentional. ## Core Features & Use Cases - Easing Curve Library: Predefined cubic-bezier values (heroOut, sharp, cinematic, settle, elastic, bounceSettle) mapped to specific UI contexts like reveals, navigation, and badges. - Spring Physics Catalog: Tuned stiffness/damping/mass presets (snappy, gentle, stiff, heavy, playful, magnetic) for Framer Motion spring animations. - Micro-Interaction Patterns: Ready-to-adapt React components for toggles, like buttons with particle bursts, animated checkboxes, skeleton shimmer loaders, and button loading states. - Use Case: When building a React dashboard with Framer Motion, use this Skill to select the correct easing and spring values for card entrances, then implement a staggered reveal that stays within the 1.5s animation budget. ## Quick Start Ask the AI to design the animation timing and spring configuration for a card entrance and like button interaction in your Framer Motion React app.