Emotion Selection

Guide for selecting emotion tokens from tokens/emotion.tokens.json to match animation context.

Quick Selection

By User State

By Interaction Type

Emotion Parameters

Each emotion maps to specific animation parameters:

celebratory:
  spring: {motion.spring.legacy.bouncy}
  duration-multiplier: 1.2
  exaggeration: expressive
  secondary-effects: particles, glow

professional:
  spring: {motion.spring.default.spatial}
  duration-multiplier: 1.0
  exaggeration: subtle
  secondary-effects: none

Selection Process

Step 1: Identify Context

What just happened?
├── Success → celebratory, delightful
├── Error → frustrated (brief)
├── Loading → anticipatory
└── Navigation → professional, welcoming

What should user feel?
├── Confident → trustworthy
├── Engaged → playful, energetic
├── Calm → calming
└── Focused → focused

Step 2: Check Brand Compatibility

Step 3: Apply Context Modifiers

From tokens/emotion.tokens.json:

Step 4: Blend if Needed

For complex scenarios, blend emotions:

// From emotion.tokens.json
"confident-celebration": {
  "blend": ["celebratory", "trustworthy"],
  "weights": [0.7, 0.3],
  "use-case": "Payment success"
}

Token Lookup

Load Token

import emotions from 'tokens/emotion.tokens.json';

const params = emotions.emotions.celebratory.parameters;
const spring = params['spring-ref']; // "{motion.spring.legacy.bouncy}"

Resolve References

Spring refs use W3C DTCG format:

{motion.spring.legacy.bouncy} → tokens/spring.tokens.json → motion.spring.legacy.bouncy

Reduced Motion Mapping

Related Skills

• Dependencies: emotion-mapping, easing, duration
• Commonly used with: animation-recipes, component-animations
• See also: accessibility (for reduced motion implementation)