playbooks

home / skills / dylantarre / animation-principles / gaming-entertainment

gaming-entertainment skill

/skills/08-by-industry/gaming-entertainment

This skill helps designers apply Disney's 12 animation principles to gaming entertainment projects, delivering immersive, emotionally resonant UI and

npx playbooks add skill dylantarre/animation-principles --skill gaming-entertainment

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

Files (1)
SKILL.md
2.9 KB
---
name: gaming-entertainment
description: Use when designing animations for gaming apps, streaming platforms, entertainment portals, or interactive media
---

# Gaming & Entertainment Animation Principles

Apply Disney's 12 principles to create immersive, exciting experiences that maximize engagement and emotional impact.

## The 12 Principles Applied

### 1. Squash & Stretch
- **Button Presses**: Satisfying squash on tap
- **Character Icons**: Bounce and stretch for personality
- **Achievements**: Badges stretch dramatically on unlock

### 2. Anticipation
- **Play Button**: Wind-up before launch
- **Loot Boxes**: Dramatic build-up before reveal
- **Level Start**: Countdown with escalating energy

### 3. Staging
- **Hero Content**: Full-bleed featured media
- **Now Playing**: Center stage with ambient effects
- **Notifications**: Attention-grabbing without blocking content

### 4. Straight Ahead & Pose to Pose
- **Gameplay**: Fluid continuous animation (straight ahead)
- **Menu Navigation**: Snappy defined states (pose to pose)
- **Cutscenes**: Choreographed sequences

### 5. Follow Through & Overlapping Action
- **UI Elements**: Staggered animation cascades
- **Victory Screens**: Multiple overlapping celebrations
- **Menu Items**: Sequential reveal with follow-through

### 6. Slow In & Slow Out
- **Epic Moments**: Dramatic slow-motion effects
- **Menu Transitions**: Quick but smooth
- **Loading Screens**: Engaging animated loops

### 7. Arc
- **Particle Effects**: Natural curved trajectories
- **Swipe Gestures**: Smooth arcing card movements
- **Projectiles**: Physics-based arc paths

### 8. Secondary Action
- **Background Animations**: Ambient movement always present
- **Achievement Pop**: Sparkles while badge animates
- **Score Update**: Effects while numbers climb

### 9. Timing
- **Fast & Responsive**: 100-200ms for game feel
- **Dramatic Moments**: Slow to 500-800ms for impact
- **UI Feedback**: Instant 50-100ms responses

### 10. Exaggeration
- **Go Big**: Entertainment thrives on drama
- **Victories**: Explosive celebrations
- **Power-ups**: Oversized visual feedback

### 11. Solid Drawing
- **Art Direction**: Consistent style across UI
- **3D Elements**: Proper depth and perspective
- **Character Animation**: Appealing poses and movements

### 12. Appeal
- **Maximum Personality**: Every element has character
- **Emotional Range**: From tension to triumph
- **Memorable Moments**: Create shareable experiences

## Industry Timing Standards

| Action | Duration | Easing |
|--------|----------|--------|
| Button Press | 100ms | ease-out |
| Menu Transition | 200ms | ease-out |
| Victory Animation | 1000-2000ms | custom-bounce |
| Achievement Pop | 500ms | spring |
| Card Flip | 300ms | ease-in-out |

## Key Principle
Entertainment is about emotion. Use animation to amplify feelings - excitement, tension, triumph, and joy. Don't hold back when the moment calls for spectacle.

Overview

This skill teaches how to apply Disney’s 12 principles of animation specifically for gaming, streaming, and interactive entertainment. It focuses on practical directions for UI, character, and effects animation to boost player engagement and emotional impact. Use it to design responsive, dramatic, and polished animations that feel both playful and professional.

How this skill works

The skill maps each of the 12 principles to concrete patterns used in games and entertainment apps — from button presses and loot reveals to cutscenes and particle effects. It recommends timing ranges, easing choices, and interaction-level rules (e.g., 100–200ms for game-feel taps vs 1–2s for victory sequences). Designers apply these mappings to UI components, gameplay feedback, and cinematic moments to create consistent, emotionally resonant motion systems.

When to use it

  • Designing interactive UI for mobile or console games
  • Crafting streaming platform player controls and overlays
  • Building achievement, level-up, or loot reveal experiences
  • Animating menus, loading screens, and onboarding flows
  • Creating cutscenes or character-driven micro-interactions

Best practices

  • Match timing to intent: fast (50–200ms) for feedback, slow (500–2000ms) for drama
  • Combine primary motion with subtle secondary actions to enrich scenes
  • Use squash & stretch and exaggeration sparingly for key moments to avoid visual fatigue
  • Keep art direction consistent so motion reinforces the brand’s visual language
  • Favor arcs and follow-through for natural, satisfying movement

Example use cases

  • Add a squash & stretch on tap and 100ms ease-out for satisfying button interactions
  • Stage a loot box reveal with anticipation, slow in/out, and a 500ms spring pop for the reward
  • Animate menu transitions at ~200ms with ease-out and layered overlapping reveals for depth
  • Design victory screens with staggered cascading elements, exaggerated bursts, and a 1–2s custom bounce
  • Implement particle arcs for projectiles and swipe gestures with smooth curved trajectories

FAQ

How do I pick timing for UI vs cinematic moments?

Use short durations (50–200ms) for UI feedback to maintain responsiveness; reserve longer timings (500–2000ms) for cinematic or celebratory moments to emphasize emotion.

When should I use exaggeration without breaking realism?

Apply exaggeration to highlight important events (victories, power-ups, reveals) while keeping mundane interactions subtle to preserve overall believability.