Skip to main content
affpapa.org
RU EN
skill CX Codex

emotional-disconnect — Claude Code skill: fix animation emotion

Diagnoses why an animation feels wrong and matches motion to the emotion the moment should carry. Useful when users call your UI cold or annoying.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add dylantarre/animation-principles --skill emotional-disconnect -a claude-code
Open on GitHub

What emotional-disconnect does

The skill ties the character of motion to context. It walks Disney's principles and finds the source of the mismatch in each: Appeal covers emotional resonance, Exaggeration covers intensity, Timing covers speed, Squash and Stretch covers elasticity, Follow Through covers how things end. Every principle comes with a stated issue and a fix.

Inside there is an emotion-to-motion map. Joy means bouncy overshoot at a fast tempo, Calm means a gentle ease-out and slow timing, Urgency means a sharp ease-in with no overshoot, Serious means linear or barely visible easing. The same file ships CSS variables — --ease-calm, --ease-playful, --ease-urgent — with the cubic-bezier values spelled out.

A troubleshooting checklist and five quick fixes round it out: name the target emotion, match easing to it, slow down serious moments, cut animations that fight the tone. One checklist item suggests asking users for three words that describe the motion. Nothing gets installed beyond the skill file, and it edits no code on its own — your agent applies the guidance to the markup you already have.

What it helps with

  • pin down why an animation feels off when nobody can articulate it
  • strip playful motion out of a serious screen
  • pick an easing curve that matches the intended emotion
  • retune timing so it fits the tone of the page
  • remove elastic effects from clinical or professional contexts

Example prompts for the agent

  • The checkout modal animation feels too playful, run emotional-disconnect on it
  • Users say the interface feels cold — pick motion that reads as calm
  • Check the easing and timing on the onboarding page, it should feel joyful

How to install emotional-disconnect

1Skills CLI (Vercel)

npx skills add dylantarre/animation-principles --skill emotional-disconnect -a claude-code

2Manually: put the files in place

~/.claude/skills/emotional-disconnect/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/emotional-disconnect/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about emotional-disconnect

How do I install emotional-disconnect in Claude?

Run npx skills add dylantarre/animation-principles --skill emotional-disconnect -a claude-code. The skill lands at ~/.claude/skills/emotional-disconnect/SKILL.md.

What does emotional-disconnect do?

It aligns animation with the emotion a moment should evoke. The skill diagnoses the mismatch through Appeal, Exaggeration, Timing, Squash and Stretch and Follow Through, then gives a fix for each.

Which platforms can run this skill?

Besides Claude, there are install commands for Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode. GitHub Copilot uses a different one: gh skill install dylantarre/animation-principles emotional-disconnect.

Source text

SKILL.md · MIT 
---
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

```css
/* 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);
```

© dylantarre · MIT · dylantarre/animation-principles

Similar skills

Everything for Design →
animation-principles Owl-Listener A skill that tunes one specific UI animation: picks easing, duration and the order in which related elements move. CX Codex +1 2,200installs hallmark Nutlope A design skill for AI coding that keeps generated UIs from looking generated. Useful when you ask an agent to build a new page or site. CX Codex +1 70,800installs prototype emilkowalski The skill builds several genuinely different versions of one piece of UI and puts them behind a visual picker, so you flip through them live and keep the one that feels right. CX Codex +1 174,300installs frontend-design cline The skill makes the agent pick a bold visual direction before writing code, then hold it through every detail. Useful when a generated interface should not look generated. CX Codex +1 7,300installs emil-design-eng emilkowalski This skill guides UI polish, component details, and animation choices. Use it when an interface works but its states and transitions need closer review. CX Codex +1 388,200installs make-interfaces-feel-better affaan-m This skill helps review and refine interface details such as spacing, typography, interaction states, and motion. Use it when a component feels unfinished or visually off. CX Codex +1 4,700installs

From the same set86

secondary-action-mastery A skill for adding secondary motion that supports the primary action instead of fighting it. Useful for UI animation and game feel. CX Codex +1 494installs feedback-indicators A skill for confirmation animations: success checkmarks, error shakes, form validation and toasts. Useful when the UI has to answer back clearly. CX Codex +1 493installs Animation Principles - Troubleshooting A skill that diagnoses why an animation feels wrong and points to the principle being misapplied. Useful when the motion reads badly but the cause is unclear. CX Codex +1 490installs Animation Principles - Advanced A skill for animators who already know the fundamentals and want the nuances: invisible squash/stretch, missing anticipation, deliberately broken arcs. CX Codex +1 489installs state-changes A skill for animating elements that transform in place: toggles, accordions, checkboxes, button states. Useful when an interface needs smooth transitions without enter or exit. CX Codex +1 489installs Animation Principles - Deep Dive A reference skill covering Disney's 12 animation principles with technical detail: deformation ratios, frame counts, arcs, follow through. Useful when the agent needs animation context. CX Codex +1 487installs Animation Principles - Novice A skill that walks through the 12 animation principles with a hands-on exercise for each. Useful once you know the theory and want to actually use it. CX Codex +1 488installs Animation Principles - Absolute Beginner Walks through the 12 principles of animation in plain words. Useful when you are touching motion in a UI or a game for the first time. CX Codex +1 486installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor