fitness-wellness — скилл для Claude Code: анимации

---
name: fitness-wellness
description: Use when designing animations for fitness apps, wellness platforms, workout trackers, or meditation experiences
---

# 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.