fitness-wellness
Use when designing animations for fitness apps, wellness platforms, workout trackers, or meditation experiences
Install
npx skills add https://github.com/dylantarre/animation-principles --skill fitness-wellnessSKILL.md
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.
Related skills
frontend-designanthropics932KGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.prototypemattpocock852KBuild a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.hyperframes-animationheygen-com569KAll animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreographyhyperframes-creativeheygen-com539KNon-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.
