mcpField
U
universal-emotion

universal-emotion

github.com/dylantarreCreative & media132517 installsUpdated 43w ago
Repository

About universal-emotion

A design skill for translating emotional goals into animation parameters using Disney’s 12 principles. It helps motion and UI designers choose timing, easing, and deformation for a target feeling.

Key features

  1. 01Map emotions across four spectrums
  2. 02Relate principles to energy and tone
  3. 03Choose easing by emotion
  4. 04Blend primary and secondary emotions

Use cases

  1. 01Set motion direction for a new feature
  2. 02Create brand-specific animation behavior
  3. 03Plan emotional transitions
  4. 04Adapt motion for accessibility

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/dylantarre/animation-principles --skill universal-emotion

After installing, type/universal-emotionin Claude Code to confirm it loaded.

Details

From the project README

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

Comments

Markdown supported