Universal Emotion
This gives you a systematic way to translate any emotional goal into concrete animation parameters using Disney's 12 principles. You define your target emotion across spectrums like energy and valence, then the framework maps those to specific timing values, easing curves, and deformation percentages. It includes quick reference tables for common emotions like joy, trust, and urgency, plus a decision tree for handling ambiguous cases. Most useful when you're moving beyond generic "smooth" or "snappy" animations and need to hit a specific emotional tone, whether that's building trust, conveying elegance, or creating playful brand moments. The CSS variable templates make it easy to codify your decisions.
- skills.sh installs
- 556
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill universal-emotion --agent claude-codeInstalls into .claude/skills of the current project.
Files
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
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/dylantarre/animation-principles
- Category
- Design & UI/UX
- First seen
- Jun 3, 2026
More from dylantarre/animation-principles
All 144- Loaders Spinners554
- Forms Inputs553
- Secondary Action Mastery551
- Social Media551
- Attention Management550
- Brand Strategist548
- Exit Animations547
- Exaggerated Clarity546
- Accordions Dropdowns545
- Straight Ahead Pose Mastery543
- Timing Calibration543
- Continuous Loops542
- Lists Grids542
- Urgency Action542
- User Feedback Clarity542
- Power Confidence540
- Feedback Indicators539
- Universal Patterns539
- Continuous Infinite535
- Emotional Disconnect534
- Problem Diagnosis534
- Responsive Adaptive534
- State Changes534
- Popmotion533
Recommended
More Design & UI/UX
exit-animationsdylantarre/animation-principlesUse when elements need to leave the screen - closing modals, dismissing notifications, removing items, page transitions out, or any "leaving view" animation.547skills.sh installsaccordions-dropdownsdylantarre/animation-principlesUse when animating accordions, collapsibles, dropdowns, or expand/collapse elements for smooth reveal transitions545skills.sh installstiming-calibrationdylantarre/animation-principlesUse when animation speed feels wrong—too fast, too slow, or inconsistent543skills.sh installslists-gridsdylantarre/animation-principlesUse when animating lists, grids, tables, or collections of items to create smooth ordering, filtering, and loading states542skills.sh installsurgency-actiondylantarre/animation-principlesUse when creating animations that prompt immediate user action, highlight time-sensitivity, or drive conversions.542skills.sh installs
glassmorphismainergiz/design-inspirationsCreates frosted glass UI elements with blur, transparency, and subtle borders. Use when building overlays, floating controls, tooltips, or any element that shou541skills.sh installs