Agent-Skills.md

Agent Skills: Emotional Disconnect

Use when animation feels wrong, creates unintended emotional response, or mismatches context

UncategorizedID: dylantarre/animation-principles/emotional-disconnect

Repository

dylantarre/animation-principles
dylantarreLicense: MIT
52

Install this agent skill to your local

pnpm dlx add-skill https://github.com/dylantarre/animation-principles/tree/HEAD/skills/12-by-problem-type/emotional-disconnect

Skill Files

Browse the full folder contents for emotional-disconnect.

Download Skill

Loading file tree…

skills/12-by-problem-type/emotional-disconnect/SKILL.md

Skill Metadata

Name
emotional-disconnect
Description
Use when animation feels wrong, creates unintended emotional response, or mismatches context

Emotional Disconnect

Align animation emotion with context using Disney's principles.

Problem Indicators

  • Animation feels "off" but hard to articulate
  • Playful motion on serious content
  • Sterile motion on warm content
  • Users describe UI as cold/robotic or chaotic/annoying
  • Mismatch between animation and message

Diagnosis by Principle

Appeal

Issue: Animation lacks emotional resonance Fix: Define the emotional goal. Warm = soft easing, overshoot. Professional = crisp, linear. Match motion to message.

Exaggeration

Issue: Wrong intensity for emotional context Fix: Serious contexts need restraint. Joyful contexts can be bouncy. Match exaggeration to emotional stakes.

Timing

Issue: Speed conflicts with emotional tone Fix: Calm emotions = slower. Excitement = faster. Tension = variable speed. Timing IS emotion.

Squash and Stretch

Issue: Elastic effects on rigid contexts Fix: Squash/stretch implies playfulness and life. Remove for serious, clinical, or professional contexts.

Follow Through

Issue: Endings don't match emotional intent Fix: Abrupt endings feel harsh. Soft landings feel gentle. Bouncy endings feel playful. Choose consciously.

Quick Fixes

  1. Name the target emotion - "This should feel calm"
  2. Match easing to emotion - Bouncy = playful, smooth = calm
  3. Adjust timing to context - Slow down serious moments
  4. Remove mismatch sources - Cut animations that fight the tone
  5. Test with emotional vocabulary - Ask users "how does this feel?"

Troubleshooting Checklist

  • [ ] What emotion should this moment evoke?
  • [ ] Does animation easing match that emotion?
  • [ ] Is timing appropriate for emotional context?
  • [ ] Would removing animation feel better?
  • [ ] Do similar products use different motion here?
  • [ ] Ask users: "What 3 words describe this animation?"
  • [ ] Does animation match content gravity?
  • [ ] Test: Cover content, does motion emotion match?

Emotion-to-Motion Map

| Emotion | Easing | Timing | Effects | |---------|--------|--------|---------| | Joy | Bouncy overshoot | Fast | Squash/stretch, scale up | | Calm | Gentle ease-out | Slow | Fade, subtle slide | | Trust | Smooth, predictable | Medium | Minimal, consistent | | Urgency | Sharp ease-in | Fast | Direct, no overshoot | | Playful | Spring physics | Variable | Rotation, bounce | | Serious | Linear or subtle ease | Slow | Minimal movement |

Code Pattern

/* Calm/trustworthy */
--ease-calm: cubic-bezier(0.4, 0, 0.2, 1);

/* Playful/joyful */
--ease-playful: cubic-bezier(0.34, 1.56, 0.64, 1);

/* Urgent/serious */
--ease-urgent: cubic-bezier(0.4, 0, 1, 1);