Back to list
dylantarre

universal-industry

by dylantarre

Disney's 12 Animation Principles - Claude Code Skill Marketplace

1🍴 1📅 Jan 24, 2026

SKILL.md


name: universal-industry description: Use when designing animations for any industry or when industry-specific guidelines do not apply

Universal Animation Principles

Apply Disney's 12 principles as flexible foundations that adapt to any industry context with sensible defaults.

The 12 Principles Applied

1. Squash & Stretch

  • Default: Subtle compression on interactive elements
  • Adjust By: Brand personality (playful = more, serious = less)
  • Universal Rule: Never distort data or important content

2. Anticipation

  • Default: Brief pause before significant actions
  • Adjust By: Action importance (bigger action = more anticipation)
  • Universal Rule: Always signal before irreversible actions

3. Staging

  • Default: Primary action takes visual focus
  • Adjust By: Content hierarchy and user goals
  • Universal Rule: One main focus per screen state

4. Straight Ahead & Pose to Pose

  • Default: Pose to pose for UI, straight ahead for data
  • Adjust By: Content type and interaction pattern
  • Universal Rule: Match approach to content predictability

5. Follow Through & Overlapping Action

  • Default: Related elements animate in sequence
  • Adjust By: Visual complexity and element relationships
  • Universal Rule: Primary element completes before secondary

6. Slow In & Slow Out

  • Default: ease-in-out for most transitions
  • Adjust By: UI context (entrances = ease-out, exits = ease-in)
  • Universal Rule: Never use linear for UI motion

7. Arc

  • Default: Subtle curves for natural movement
  • Adjust By: Interface formality (casual = more arc)
  • Universal Rule: Straight lines for data, curves for character

8. Secondary Action

  • Default: One supporting animation per primary action
  • Adjust By: Moment importance and brand expression
  • Universal Rule: Secondary never overshadows primary

9. Timing

  • Default: 200-300ms for standard interactions
  • Adjust By: Industry pace and user expectations
  • Universal Rule: Faster for frequent, slower for significant

10. Exaggeration

  • Default: Subtle, 10-20% beyond literal
  • Adjust By: Brand personality and context appropriateness
  • Universal Rule: Exaggerate successes, minimize failures

11. Solid Drawing

  • Default: Consistent visual language throughout
  • Adjust By: Platform conventions and brand guidelines
  • Universal Rule: Maintain perspective and proportions

12. Appeal

  • Default: Clean, refined motion that feels intentional
  • Adjust By: Target audience and brand personality
  • Universal Rule: Animation should never feel accidental

Universal Timing Defaults

ActionDurationEasing
Micro-interaction100-150msease-out
Standard Transition200-300msease-in-out
Complex Animation300-500msease-in-out
Emphasis Moment400-600mscustom
Page Transition300-400msease-in-out

Adaptation Framework

By Brand Personality

  • Professional: Reduce squash/stretch, minimize exaggeration
  • Playful: Increase bounce, add secondary actions
  • Premium: Slower timing, refined easing curves
  • Energetic: Faster timing, more dynamic motion

By User Context

  • Working: Minimize animation, maximize efficiency
  • Browsing: Enhance discovery with motion
  • Celebrating: Amplify positive moments
  • Learning: Support comprehension with motion

Key Principle

Start with sensible defaults, then calibrate based on industry expectations, brand personality, and user context. When in doubt, err toward subtlety and efficiency.

Score

Total Score

60/100

Based on repository quality metrics

SKILL.md

SKILL.mdファイルが含まれている

+20
LICENSE

ライセンスが設定されている

+10
説明文

100文字以上の説明がある

0/10
人気

GitHub Stars 100以上

0/15
最近の活動

1ヶ月以内に更新

+10
フォーク

10回以上フォークされている

0/5
Issue管理

オープンIssueが50未満

+5
言語

プログラミング言語が設定されている

0/5
タグ

1つ以上のタグが設定されている

+5

Reviews

💬

Reviews coming soon