About fitness-wellness
A design skill for applying Disney’s 12 animation principles to fitness and wellness interfaces. It guides designers in matching motion to workout intensity or calmer activities such as meditation, with examples and timing references.
Key features
- 01Applies 12 animation principles to fitness UI
- 02Examples for workouts, progress, and goals
- 03Contrasts energetic and calming motion
- 04Provides animation duration and easing references
Use cases
- 01Designing workout start and completion animations
- 02Showing exercise progress and personal records
- 03Creating calm transitions for meditation
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/fitness-wellnessin Claude Code to confirm it loaded.
Details
From the project READMEFitness & 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.
Comments
Markdown supported