universal-emotion
Use when you need to achieve any emotional outcome through animation—provides a framework for mapping Disney principles to any target emotion.
How do I install this agent skill?
npx skills add https://github.com/dylantarre/animation-principles --skill universal-emotionIs this agent skill safe to install?
- Gen Agent Trust Hubpass
This skill is a documentation-style framework that provides guidelines for mapping animation principles to emotional outcomes. It contains no executable code, scripts, network operations, or sensitive data access, posing no security risks.
- Socketpass
No alerts
- Snykpass
Risk: LOW · No issues
- Runlayerwarn
1/1 file flagged
- ZeroLeakspass
Score: 93/100 · 2 sections analyzed
What does this agent skill do?
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
- 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
How can the creator link this skill?
Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.
<a href="https://skillzs.dev/skills/dylantarre/animation-principles/universal-emotion">View universal-emotion on skillZs</a>