fitness-wellness

Use when designing animations for fitness apps, wellness platforms, workout trackers, or meditation experiences

By dylantarre · 568 installs

npx skills add dylantarre/animation-principles --skill fitness-wellness

Source repository · Upstream listing

Fitness & Wellness Animation Principles Apply Disney's 12 principles to create motivating, energizing experiences that celebrate achievement and support healthy habits. The 12 Principles Applied 1. Squash & Stretch Workout Buttons : Energetic squash on tap Progress Rings : Pulse with achievement Activity Icons : Bounce with completion 2. Anticipation Workout Start : Countdown builds energy Timer Begin : Ready set go sequence Goal Completion : Suspenseful approach 3. Staging Current Exercise : Full focus on active movement Stats Display : Supporting role during workout Rest Periods : Recovery metrics highlighted 4. Straight Ahead & Pose to Pose Live Workouts : Continuous timer flow (straight ahead) Exercise Sequence : Move by move progression (pose to pose) Meditation Guides : Defined breathing phases 5. Follow Through & Overlapping Action Workout Complete : Badge lands, then stats appear Calorie Counter : Numbers settle with follow through Activity Rings : Animate sequentially with overlap 6. Slow In & Slow Out High Energy Moments : Quick, punchy timing Recovery/Meditation : Slow, calming easing Transitions : Match current activity intensity 7. Arc Progress Circles : Smooth arc completion Running Routes : Curved path visualization Gesture Controls : Natural arced movements 8. Secondary Action Goal Hit : Fireworks while achievement saves Personal Record : Crown appears with celebration Streak Maintained : Fire burns while counter updates 9. Timing Intense Moments : Fast 100 150ms for energy Mindfulness : Slow 500 700ms for calm Standard UI : Moderate 200 300ms 10. Exaggeration Celebrate Big : Fitness thrives on motivation Personal Records : Dramatic achievement reveals Streak Milestones : Memorable celebrations 11. Solid Drawing Body Mechanics : Accurate movement demonstrations Data Visualization : Clear, readable metrics Exercise Illustrations : Proper form representation 12. Appeal Motivational Energy : Uplifting, encouraging motion Dual Modes : Intensity for workouts, calm for wellness Achievement Focus : Every win feels significant Industry Timing Standards Action Duration Easing Button Press 150ms ease out Ring Complete 600ms spring Workout Transition 250ms ease in out Meditation Fade 500ms ease in out Achievement Pop 800ms custom bounce Key Principle Match animation energy to activity intensity. Workouts demand energetic, motivating motion while meditation requires calm, breathing synced animations. Always celebrate progress.