healthcare-medical

Original：🇺🇸 English

Translated

Use when designing animations for medical apps, patient portals, telehealth, or health tracking interfaces

3installs

Sourcedylantarre/animation-principles

Added on2026-02-11

NPX Install

npx skill4agent add dylantarre/animation-principles healthcare-medical

SKILL.md Content

View Translation Comparison →

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.