home / skills / dylantarre / animation-principles / healthcare-medical
This skill helps design calming, clear medical app animations by applying Disney principles to reduce anxiety and improve patient comprehension.
npx playbooks add skill dylantarre/animation-principles --skill healthcare-medicalReview the files below or copy the command above to add this skill to your agents.
---
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.
This skill guides designers and developers to apply Disney’s 12 animation principles specifically for healthcare and medical interfaces. It focuses on creating calming, trustworthy motion that prioritizes clarity, reduces patient anxiety, and supports accessibility. Use it to shape animations for patient portals, telehealth, health trackers, and clinical dashboards.
The skill maps each animation principle to concrete UI patterns and constraints in medical contexts, recommending when to use or avoid motion. It provides timing, easing, and duration standards for common actions, plus examples like breathing guides, alert behavior, and data visualization transitions. Rules emphasize restraint: gentle easing, clear hierarchy, and accessibility-compliant contrast and timing.
How fast should most transitions be?
Aim for 400–500ms with ease-in-out for page and major transitions; use 350ms ease-out for modals and ~300ms for data refreshes.
When is exaggeration acceptable in a medical app?
Use exaggeration only for urgent or emergency states where amplified motion supports immediate recognition; otherwise, keep motions restrained to avoid alarm.