UI Micro-Interaction Design

Create UI micro-interaction animations.

**Interaction Type:** ${{TYPE}}
**Application:** ${{APPLICATION}}
**Brand Style:** ${{STYLE}}
**Platform:** ${{PLATFORM}}

Generate micro-interaction:

**Interaction Types:**

Common Triggers:
- Button press
- Form submit
- Toggle switch
- Menu expand
- Scroll response
- Hover effects
- Pull to refresh
- Swipe actions

**Design Principles:**

Good Micro-Interactions:
- Purposeful feedback
- Delightful surprise
- Quick response
- Consistent behavior
- Subtle enhancement

**Animation Duration:**

Timing Guidelines:
- Instant: 100ms
- Fast: 200ms
- Normal: 300ms
- Slow: 500ms
- Never too long

**Easing Curves:**

Motion Feel:
- Ease out (most common)
- Ease in-out (toggles)
- Spring (bouncy)
- Linear (progress)
- Custom (brand)

**Button States:**

Button Interactions:
- Hover preview
- Press feedback
- Loading state
- Success confirmation
- Error indication

**Form Feedback:**

Input Interactions:
- Focus state
- Typing feedback
- Validation real-time
- Submit confirmation
- Error messaging

**Navigation:**

Menu Animations:
- Expand/collapse
- Slide transitions
- Fade effects
- Icon morphing
- Page transitions

**Implementation:**

Technical:
- CSS animations
- JavaScript/GSAP
- Lottie files
- Native platform
- Performance first