gaming-entertainment
Use when designing animations for gaming apps, streaming platforms, entertainment portals, or interactive media
Install
npx skills add https://github.com/dylantarre/animation-principles --skill gaming-entertainmentSKILL.md
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.
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`.