Back to list
dylantarre

universal-emotion

by dylantarre

Disney's 12 Animation Principles - Claude Code Skill Marketplace

1🍴 1📅 Jan 24, 2026

SKILL.md


name: universal-emotion description: Use when you need to achieve any emotional outcome through animation—provides a framework for mapping Disney principles to any target emotion.

Universal Emotion Animation Framework

Map Disney's 12 principles to any emotional goal through systematic analysis.

Emotional Goal

Any emotion can be achieved through intentional application of animation principles. This framework helps translate emotional intent into specific motion parameters.

Emotion Mapping Framework

Step 1: Define the Emotion

Identify your target on these spectrums:

  • Energy: Low ←→ High
  • Valence: Negative ←→ Positive
  • Arousal: Calm ←→ Excited
  • Dominance: Submissive ←→ Powerful

Step 2: Map Principles to Emotion

PrincipleLow EnergyHigh Energy
Squash & Stretch0-10%20-40%
Anticipation50-100ms150-300ms
Timing400-800ms100-250ms
Exaggeration0-15%25-50%
Follow ThroughExtended settleQuick bounce
PrincipleSeriousPlayful
ArcDirect/LinearCurved/Bouncy
Secondary ActionMinimalAbundant
Straight AheadAvoidEmbrace
AppealClean/GeometricRound/Organic

Step 3: Select Easing

Emotion TypeEasing StyleExample
CalmSymmetric easeease-in-out
ConfidentStrong ease-outcubic-bezier(0,0,0.2,1)
PlayfulOvershootcubic-bezier(0.34,1.56,0.64,1)
UrgentSharp ease-outcubic-bezier(0.0,0,0.2,1)
ElegantExtended easecubic-bezier(0.4,0,0.6,1)

Quick Reference by Emotion

Positive Emotions

  • Joy: Fast timing, high squash/stretch, bouncy easing
  • Trust: Consistent timing, minimal deformation, smooth easing
  • Calm: Slow timing, subtle movement, symmetric easing
  • Excitement: Fast timing, high energy, dynamic easing

Functional Emotions

  • Urgency: Very fast, direct paths, attention-grabbing
  • Professional: Moderate timing, minimal decoration, standard easing
  • Friendly: Moderate timing, soft deformation, gentle easing

Premium Emotions

  • Elegant: Slower timing, no deformation, refined easing
  • Powerful: Deliberate timing, impact emphasis, strong easing

CSS Variables Template

:root {
  /* Adjust based on target emotion */
  --emotion-duration: 300ms;
  --emotion-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --emotion-squash: 1;
  --emotion-overshoot: 0;
}

Decision Tree

  1. Is the emotion high or low energy?
  2. Is the feeling positive, negative, or neutral?
  3. Should users feel in control or guided?
  4. Is this a moment or a state?
  5. What's the brand personality?

Combining Emotions

Real experiences blend emotions. Layer principles:

  • Primary emotion: 70% influence
  • Secondary emotion: 30% influence
  • Adjust timing/easing accordingly

When to Use

  • Novel emotional requirements
  • Brand-specific interpretations
  • Complex emotional journeys
  • A/B testing emotional impact
  • Cross-cultural considerations
  • Accessibility adaptations

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