Healthcare Medical

---
name: healthcare-medical
description: Use when designing animations for medical apps, patient portals, telehealth, or health tracking interfaces
---

# Healthcare & Medical Animation Principles

Apply Disney's 12 principles to create calming, trustworthy experiences that prioritize clarity and reduce anxiety.

## The 12 Principles Applied

### 1. Squash & Stretch
- **Minimal Use**: Avoid playful squash on health data
- **Breathing Exercises**: Gentle expand/contract for guided breathing
- **Heart Rate**: Subtle pulse matching actual rhythm

### 2. Anticipation
- **Appointment Booking**: Brief preparation before confirmation
- **Test Results**: Thoughtful pause before revealing sensitive data
- **Medication Reminders**: Gentle fade-in, never jarring

### 3. Staging
- **Critical Alerts**: Center stage with clear hierarchy
- **Vital Signs**: Most important metrics prominently displayed
- **Privacy First**: Blur or hide sensitive info until focused

### 4. Straight Ahead & Pose to Pose
- **Health Journeys**: Step-by-step progress (pose to pose)
- **Real-time Monitoring**: Continuous data streams (straight ahead)
- **Onboarding**: Clear sequential steps

### 5. Follow Through & Overlapping Action
- **Dashboard Load**: Cards appear in logical health order
- **Prescription Updates**: Medicine icon settles before details
- **Chart Animations**: Data points connect sequentially

### 6. Slow In & Slow Out
- **All Transitions**: Gentle easing, never abrupt
- **Modal Reveals**: Soft fade-in for sensitive information
- **Navigation**: Smooth 400-500ms transitions

### 7. Arc
- **Progress Indicators**: Circular arcs for completion
- **Body Diagrams**: Smooth paths between body regions
- **Timeline Navigation**: Curved paths through health history

### 8. Secondary Action
- **Confirmation Checkmarks**: Gentle pulse after booking
- **Loading States**: Calming animations during data fetch
- **Success States**: Subtle color transitions

### 9. Timing
- **Slower Overall**: 400-600ms for calm, measured feel
- **Critical Alerts**: Faster 200ms to ensure attention
- **Data Entry**: Responsive 150ms feedback

### 10. Exaggeration
- **Avoid in Most Cases**: Medical context requires restraint
- **Emergency Only**: Reserved for urgent alerts
- **Celebrations**: Subtle for health milestones

### 11. Solid Drawing
- **Anatomical Accuracy**: Correct body representations
- **Chart Clarity**: Legible graphs at all sizes
- **Accessibility**: High contrast, readable animations

### 12. Appeal
- **Calm Professionalism**: Trust through restraint
- **Warm Colors**: Soft blues, greens for comfort
- **Human Touch**: Gentle transitions feel caring

## Industry Timing Standards

| Action | Duration | Easing |
|--------|----------|--------|
| Page Transition | 400-500ms | ease-in-out |
| Modal Open | 350ms | ease-out |
| Alert Appearance | 200ms | ease-out |
| Data Refresh | 300ms | ease-in-out |
| Success Feedback | 400ms | ease-out |

## Key Principle
Animations must never cause anxiety or confusion. Prioritize clarity, accessibility, and a calming presence. When in doubt, animate less.