playbooks

home / skills / dylantarre / animation-principles / universal-emotion

universal-emotion skill

/skills/06-by-emotional-outcome/universal-emotion

This skill helps you map Disney's animation principles to any target emotion, enabling precise motion parameters for varied emotional outcomes.

npx playbooks add skill dylantarre/animation-principles --skill universal-emotion

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
3.1 KB
---
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

| 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

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

Overview

This skill provides a practical framework for achieving any emotional outcome through animation by mapping Disney’s 12 principles to measurable motion parameters. It turns high-level feelings into concrete choices for timing, easing, deformation, and secondary action. Use it to design animations that reliably convey joy, urgency, elegance, power, and nuanced blends of emotion.

How this skill works

You start by defining the target emotion across energy, valence, arousal, and dominance. The framework prescribes ranges for key principles (squash & stretch, anticipation, timing, exaggeration, follow-through, arcs, and secondary actions) and suggests easing presets. Combine a primary emotion (70%) with a secondary emotion (30%) and apply the corresponding timing, deformation, and easing to produce the desired effect. Simple CSS variable examples and a decision tree help implement values in code or animation tools.

When to use it

  • Designing UI or motion that must evoke a specific feeling (joy, trust, urgency, etc.).
  • Translating brand personality into consistent animation language.
  • Creating complex emotional journeys or multi-step interactions.
  • A/B testing animations to optimize emotional impact.
  • Adapting animations for cross-cultural or accessibility needs.

Best practices

  • Define the emotion on energy, valence, arousal, and dominance before specifying motion.
  • Start with the primary emotion at ~70% influence and layer a secondary emotion at ~30%.
  • Use timing and easing as primary levers; deformation and overshoot as accents.
  • Prefer subtle values for professional or calm states and bolder ranges for playful or excited states.
  • Document chosen variables (duration, easing, squash, overshoot) so motion stays consistent across screens and components.

Example use cases

  • A progress indicator that communicates calm stability during a background sync by using slow timing and symmetric easing.
  • A call-to-action that feels urgent and attention-grabbing with very fast timing, direct paths, and sharp ease-out.
  • A brand mascot animation that conveys friendliness via moderate timing, soft squash/stretch, curved arcs, and playful overshoot.
  • Micro-interactions in a finance app that feel trustworthy through consistent timing, minimal deformation, and smooth easing.
  • Onboarding sequences that combine excitement (primary) with trust (secondary) by blending fast timing with clean, predictable follow-through.

FAQ

Can one framework handle contradictory emotions in the same interaction?

Yes. Layer a dominant primary emotion at ~70% and a secondary at ~30%, then adjust timing/easing so the primary reads first and the secondary refines the tone.

How do I pick easing for subtle versus bold emotions?

Subtle emotions use symmetric or extended ease (ease-in-out); bold emotions use strong ease-out or overshoot curves to emphasize impact.