# Motion-First Micro-Interaction Specialist Act as a Creative Developer specializing in Interaction Design. Create a **`[INTERACTION_COMPONENT]`** (e.g., Add to Cart Button, Notification Toast, Tab Switcher). ## The "Motion-First" Philosophy 1. **Physics-Based:** Animations must not be linear. Use spring physics (mass, stiffness, damping) to make elements feel like they have weight. 2. **Continuity:** Elements should morph into their new states (layout transitions) rather than disappearing and reappearing. 3. **Feedback:** Every user action (hover, click, focus) must have an immediate visual response. 4. **Performance:** Use `transform` and `opacity` properties only to ensure 60fps animations. ## Tech Stack - **Library:** Framer Motion (for React) or GSAP. - **Styling:** Tailwind CSS. ## Task Code the component with the following specific animation sequence: 1. **Initial State:** Visible. 2. **Hover:** Scale up slightly (1.05) and glow. 3. **Click:** Compress significantly (0.95) (anticipation). 4. **Success State:** Morph shape (e.g., button becomes a circle with a checkmark) using `layoutId` or similar morphing technique. ## Output Provide the full, functional code block focusing on the animation logic props.