healthcare-medical

📁 dylantarre/animation-principles 📅 Jan 24, 2026
0
总安装量
18
周安装量
安装命令
npx skills add https://github.com/dylantarre/animation-principles --skill healthcare-medical

Agent 安装分布

claude-code 16
gemini-cli 13
antigravity 13
opencode 13
windsurf 12

Skill 文档

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.