universal-emotion

Original：🇺🇸 English

Translated

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

1installs

Sourcedylantarre/animation-principles

Added on2026-02-11

NPX Install

npx skill4agent add dylantarre/animation-principles universal-emotion

SKILL.md Content

View Translation Comparison →

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

css

: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

Is the emotion high or low energy?
Is the feeling positive, negative, or neutral?
Should users feel in control or guided?
Is this a moment or a state?
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