Gaming Entertainment
This is a reference guide for applying Disney's 12 animation principles to gaming and entertainment UIs. You get specific timing recommendations (button presses at 100ms, victory screens at 1-2 seconds), concrete examples for each principle (squash on button taps, anticipation before loot box reveals), and a timing standards table you can actually use. The approach here is go big or go home, which makes sense for entertainment where spectacle matters more than subtlety. It's opinionated about creating emotional impact through animation rather than just functional transitions. If you're building anything game adjacent or entertainment focused, the principles translate well even if you tone down the drama a bit for your specific context.
- skills.sh installs
- 578
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill gaming-entertainment --agent claude-codeInstalls into .claude/skills of the current project.
Files
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
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/dylantarre/animation-principles
- Category
- Design & UI/UX
- First seen
- Jun 3, 2026
More from dylantarre/animation-principles
All 144- Appeal Mastery577
- Accessibility Advocate576
- Anticipation Mastery575
- Entrance Animations572
- Modals Dialogs572
- Slow In Out Mastery572
- Spatial Thinking572
- Ux Researcher571
- Excitement Energy570
- Anticipation Payoff568
- Calm Relaxation566
- Joy Delight566
- Attention Grabbers565
- Brand Consistency565
- Timing Principle Mastery565
- Micro 100 200ms564
- Exaggeration Mastery562
- Performance Optimization562
- React Spring562
- Enterprise B2b558
- Cards Containers557
- Orchestrated Sequences557
- Universal Emotion556
- Loaders Spinners554
Recommended
More Design & UI/UX
modals-dialogsdylantarre/animation-principlesUse when animating modals, dialogs, popovers, or overlay content to create smooth entrances and exits572skills.sh installsexcitement-energydylantarre/animation-principlesUse when creating animations that generate enthusiasm, build anticipation, or create high-energy experiences.570skills.sh installsjoy-delightdylantarre/animation-principlesUse when creating animations that evoke happiness, surprise, or delightful moments in the user experience.566skills.sh installsmicro-100-200msdylantarre/animation-principlesUse when building micro-interactions between 100-200ms - tooltips appearing, dropdown opens, small feedback animations that feel quick but perceptible564skills.sh installsperformance-optimizationdylantarre/animation-principlesUse when animation runs slow, janky, or causes frame drops562skills.sh installsreact-springdylantarre/animation-principlesUse when implementing Disney's 12 animation principles with React Spring's physics-based animations562skills.sh installs