universal-emotion

dylantarre's avatarfrom dylantarre

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

⭐0stars🔀0forks📁View on GitHub🕐Updated Dec 30, 2025
[Brand and Creative Direction]

When & Why to Use This Skill

This Claude skill provides a systematic framework for mapping Disney's 12 animation principles to specific emotional outcomes. It empowers designers and developers to translate abstract brand feelings into concrete motion parameters—such as timing, easing, and squash-and-stretch—to create more resonant and psychologically aligned user experiences.

Use Cases

  • Brand Identity Alignment: Establishing a consistent motion language that reflects a brand's core personality (e.g., 'Elegant' vs. 'Playful') across all digital touchpoints.
  • UI/UX Micro-interactions: Designing interface animations that evoke specific emotional responses, such as building 'Trust' during a checkout process or 'Excitement' during a gamified achievement.
  • Technical Implementation: Utilizing the provided CSS variable templates and cubic-bezier easing styles to quickly implement high-quality, emotion-driven animations in web and mobile applications.
  • User Experience Optimization: Refining complex emotional journeys by layering primary and secondary animation principles to guide user sentiment during high-stakes interactions.
  • A/B Testing Motion Impact: Systematically testing different emotional motion profiles to determine which animation style best drives user engagement and conversion.
nameuniversal-emotion
descriptionUse 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

Principle Low Energy High Energy
Squash & Stretch 0-10% 20-40%
Anticipation 50-100ms 150-300ms
Timing 400-800ms 100-250ms
Exaggeration 0-15% 25-50%
Follow Through Extended settle Quick bounce
Principle Serious Playful
Arc Direct/Linear Curved/Bouncy
Secondary Action Minimal Abundant
Straight Ahead Avoid Embrace
Appeal Clean/Geometric Round/Organic

Step 3: Select Easing

Emotion Type Easing Style Example
Calm Symmetric ease ease-in-out
Confident Strong ease-out cubic-bezier(0,0,0.2,1)
Playful Overshoot cubic-bezier(0.34,1.56,0.64,1)
Urgent Sharp ease-out cubic-bezier(0.0,0,0.2,1)
Elegant Extended ease cubic-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