🇺🇸English

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

Key Principle

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

Weekly Installs

82

Repository

dylantarre/anim…inciples

GitHub Stars

20

First Seen

Jan 24, 2026

Security Audits

Gen Agent Trust HubPassSocketPassSnykPass

Installed on

codex74

gemini-cli73

opencode72

cursor71

github-copilot68

cline62