home / skills / dylantarre / animation-principles / fitness-wellness

fitness-wellness skill

safe

This skill helps design fitness and wellness animations using Disney principles to energize workouts and calm meditation, aligning motion with activity.

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

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

2.9 KB

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

Overview

This skill applies Disney’s 12 principles of animation to fitness and wellness interfaces, helping designers create motivating, readable, and emotionally aligned motion. It provides concrete patterns, timing guidelines, and examples to match animation energy to activity intensity. Use it to boost engagement, clarify state changes, and celebrate progress in workout apps, trackers, and meditation experiences.

How this skill works

The skill maps each of the 12 animation principles to common fitness-and-wellness components (buttons, progress rings, timers, badges, guided breathing). It recommends motion types, easing, and durations for high-energy and low-energy scenarios, and outlines layered actions so secondary animations support the primary moment. Designers get actionable timing standards and microinteraction recipes to implement consistent, intention-driven motion.

When to use it

Designing microinteractions for workout start, completion, or goal achievement
Animating progress rings, activity icons, and route visualizations
Creating transitions between active exercise and rest or meditation modes
Crafting celebration sequences for personal records and streaks
Designing guided breathing and meditation animations that sync with pacing

Best practices

Match motion energy to activity intensity: punchy timing for workouts, slow easing for meditation
Use anticipation to prepare users for action and follow-through to reinforce completion
Layer secondary actions (confetti, crowns, counters) so they enhance rather than distract
Favor readable, solid visuals for form and data; ensure clarity before flourish
Keep standard durations (100–800ms) consistent across the product for predictable feedback

Example use cases

A workout app where the Start button squashes on tap, countdown uses anticipation, and the progress ring arcs smoothly to completion
A meditation timer that fades in slowly, paces breathing bubbles via slow-in/slow-out easing, and highlights recovery stats afterward
A fitness tracker that animates activity rings in overlapping sequence and pops a crown with an exaggerated reveal when hitting a PR
A running route visualization that follows natural arcs and animates pace changes with timing adjustments
A streak system that uses subtle secondary fire or glow while the streak counter settles with follow-through

FAQ

How do I choose durations for different interactions?

Match intent: 100–150ms for high-energy taps, 200–300ms for standard UI, 500–700ms for calm transitions, and up to 800ms for celebratory reveals.

When should I use secondary actions?

Only when they add context or motivation—use them to celebrate or reinforce the primary action without stealing focus from functional feedback.