К основному содержанию
скилл CX Codex

exaggeration-mastery — скилл для Claude Code: насколько усилить

Скилл помогает решить, насколько вывести движение за пределы реализма, чтобы ключевые моменты читались на экране.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add dylantarre/animation-principles --skill exaggeration-mastery -a claude-code
Открыть на GitHub

Что делает exaggeration-mastery

Скилл объясняет, как подбирать степень утрирования под контекст. Внутри — шкала от 1.1 до 2x и выше: сдержанно для корпоративных интерфейсов, умеренно для потребительских продуктов, смело для игр и развлекательного контента. Для каждого уровня расписано, что именно усиливать — позы, тайминг, интервалы, сквош и стретч, дуги, мимику.

Отдельный раздел про то, чего утрировать не стоит: пропорции во время движения, разные физические законы для одного объекта, всё сразу. Есть метод калибровки из пяти шагов: начать с реалистичного движения, выбрать ключевое качество, усилить его на 50%, оценить результат и подстроить. Советует начинать с 10-20% для профессиональных контекстов и 30-50% для потребительских.

Скилл пригодится, когда анимация выглядит вялой, а непонятно, где перебор. Главная ловушка — несогласованность: если один элемент усилен на 30%, связанные с ним должны быть усилены пропорционально, иначе возникает диссонанс.

Какие задачи решает

  • подобрать степень утрирования под серьёзный интерфейс
  • оживить микроанимации кнопок и переходов
  • сделать праздничные состояния заметнее без мультяшности
  • усилить отдачу от удара в игре
  • согласовать уровень утрирования между связанными элементами

Примеры запросов агенту

  • оцени анимацию модального окна — не переборщил ли я с пружиной
  • подбери уровень утрирования для онбординга мобильного приложения
  • проверь, согласован ли тайминг у карточек и тултипов

Как установить exaggeration-mastery

1Через Skills CLI (Vercel)

npx skills add dylantarre/animation-principles --skill exaggeration-mastery -a claude-code

2Вручную: положить файлы

~/.claude/skills/exaggeration-mastery/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/exaggeration-mastery/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о exaggeration-mastery

Как установить exaggeration-mastery в Claude?

Выполните npx skills add dylantarre/animation-principles --skill exaggeration-mastery -a claude-code. Скилл окажется в ~/.claude/skills/exaggeration-mastery/SKILL.md.

Что делает exaggeration-mastery?

Помогает выбрать, насколько усилить движение относительно реализма, и объясняет, какие параметры анимации стоит утрировать, а какие нет.

Чем этот скилл отличается от squash-and-stretch?

Сквош и стретч здесь названы главным инструментом утрирования: именно степень деформации задаёт, насколько мультяшно выглядит движение.

Исходный текст

SKILL.md · MIT
---
name: exaggeration-mastery
description: Use when determining how far to push motion beyond realism, calibrating animation intensity for context, or making key moments register with audiences.
---

# Exaggeration Mastery

## The Truth Beyond Realism

Exaggeration isn't about making things unrealistic—it's about making things feel true. A perfect photographic copy of motion often feels dead on screen. Animation requires pushing beyond literal reality to capture the essence of movement, emotion, and intent.

## Core Theory

**The camera lies**: Film loses dimension, haptic feedback, and environmental immersion. What reads clearly in real life often flattens on screen. Exaggeration compensates for this loss.

**Essence over accuracy**: Exaggeration distills motion to its essential quality. A sad slump becomes sadder. A joyful leap becomes more joyful. The caricature captures truth the photograph misses.

## The Exaggeration Spectrum

**Subtle (1.1-1.2x)**: Corporate, serious contexts. Motion feels polished but grounded.
**Moderate (1.3-1.5x)**: Consumer products, friendly brands. Motion feels alive and engaging.
**Bold (1.6-2x)**: Entertainment, games, playful contexts. Motion has personality and energy.
**Theatrical (2x+)**: Cartoons, comedy, stylized work. Motion defines the reality.

## What to Exaggerate

**Poses**: Push silhouettes further than comfortable. If a lean feels like 15°, make it 20°.
**Timing**: Compress fast actions further, extend holds longer.
**Spacing**: Increase contrast between fast and slow phases.
**Squash/stretch**: Push deformation beyond physical limits.
**Arcs**: Sweep paths wider than strict physics suggests.
**Expression**: Amplify emotional poses and reactions.

## What NOT to Exaggerate

**Proportions during motion**: Unless the style supports it, characters shouldn't distort
**Physical laws differently for same object**: Stay internally consistent
**Everything equally**: Exaggeration needs contrast with restraint

## Interaction with Other Principles

**Squash/stretch is exaggeration's primary vehicle**: How much deformation defines how cartoony the motion feels.

**Timing exaggeration shapes genre**: Snappy timing = comedy; held timing = drama.

**Anticipation often gets exaggerated**: Big wind-ups before small actions (comedy), or tiny wind-ups before big actions (surprise).

**Staging guides what gets exaggerated**: Primary action gets more; secondary stays restrained.

## Domain Applications

### UI/Motion Design
- **Micro-interactions**: 1.1-1.3x (bounces slightly bouncier, scales slightly larger)
- **Celebrations**: 1.5-2x (confetti, badges, success states)
- **Error states**: Subtle exaggeration draws attention without alarm
- **Onboarding**: Moderately exaggerated to teach interaction patterns

### Character Animation
- **Acting for camera**: Stage-level expression, not naturalistic
- **Action sequences**: Physics-defying moves that read clearly
- **Comedy**: Extreme exaggeration is the language of humor
- **Drama**: Restrained exaggeration for believable intensity

### Motion Graphics
- **Brand personality**: Exaggeration level defines visual voice
- **Data visualization**: Subtle overshoot aids comprehension
- **Kinetic typography**: Exaggerated movement adds emphasis

### Game Feel
- **Jump arcs**: Exaggerated apex hang time
- **Hit reactions**: Over-the-top knockback for satisfaction
- **Abilities**: Exaggerated wind-up and release
- **Feedback**: Bigger than realistic responses to player action

## Common Mistakes

1. **Under-exaggeration**: Motion feels stiff, lifeless, timid
2. **Over-exaggeration for context**: Cartoon motion in serious enterprise software
3. **Inconsistent exaggeration**: Some elements pushed, others realistic—creates dissonance
4. **Exaggerating the wrong thing**: Pushing secondary action while primary stays flat

## The Restraint Paradox

The best exaggeration is invisible. Push motion until it's clearly too much, then pull back 20%. The audience should feel the energy without consciously thinking "that's exaggerated."

## Context Calibration Method

1. Start with realistic motion
2. Identify the key quality to communicate (weight, speed, joy, impact)
3. Push that quality by 50%
4. Evaluate if it reads as "true" or "cartoonish"
5. Adjust until it feels right for context

## Implementation Heuristic

Default to 10-20% exaggeration for professional contexts, 30-50% for consumer/entertainment. Always maintain internal consistency—if one element is pushed 30%, related elements should be proportionally pushed. Exaggeration without intention is just sloppiness; purposeful exaggeration is artistry.

© dylantarre · MIT · dylantarre/animation-principles

Похожие скиллы

Всё по теме «Дизайн» →
animation-principles iart-ai Скилл задаёт физику и тайминги интерфейсной анимации. Он выдаёт точные кривые cubic-bezier, задержки шагов и длительности в миллисекундах. CX Codex +1 3 000установок motion-design LottieFiles Скилл помогает проектировать анимации интерфейса: выбирать длительность, easing и последовательность движения. Пригодится для микровзаимодействий, загрузки и переходов между страницами. CX Codex +1 19 900установок flutter-animating-apps nexu-io Помогает внедрять анимации и переходы в приложения на Flutter. Пригодится при проработке нативного моушн-дизайна для iOS и Android. CX Codex +1 2 900установок animation-designer daffy0208 Скилл для веб-анимаций: переходы страниц, появление компонентов, параллакс и микро-взаимодействия на Framer Motion и CSS. CX Codex +1 1 900установок motion-principles AThevon Скилл задаёт правила интерфейсной анимации: безопасные свойства, тайминги, кривые разгона и режим reduced-motion для веба, SwiftUI и Jetpack Compose. CX Codex +1 1 100установок godot-animation-tree-mastery thedivergentai Скилл обучает ИИ-агента правильно настраивать AnimationTree в Godot. Он помогает собирать сложные графы движений, стейт-машины и смешивание анимаций без рывков. CX Codex +1 412установок

Из того же набора86

universal-emotion Скилл переводит заданную эмоцию в параметры анимации: тайминги, изинг, деформацию. Пригодится, когда нужно, чтобы интерфейс ощущался спокойным, резким или игривым. CX Codex +1 509установок forms-inputs Скилл учит агента анимировать поля ввода, текстовые области и селекты: подсказки по таймингам, состояниям и CSS-переходам для понятной обратной связи. CX Codex +1 507установок orchestrated-sequences Скилл для сборки многочастных анимаций: подсказывает, как расставить задержки, кривые и роли элементов, чтобы появление выглядело одним движением. CX Codex +1 505установок social-media Скилл для анимаций в соцсетях, мессенджерах и фичах сообществ: подсказывает тайминги и поведение интерфейса. CX Codex +1 504установок brand-strategist Помогает описать характер бренда через движение: тайминги, кривые, степень растяжения. Пригодится, когда анимация в продукте должна звучать так же, как логотип и голос бренда. CX Codex +1 503установок exit-animations Скилл подсказывает агенту, как анимировать исчезновение элементов: закрытие модалок, скрытие уведомлений, удаление строк списка. CX Codex +1 500установок Animation Principles - Expert Скилл для тех, кто уже освоил базовые принципы анимации и хочет нарушать их намеренно: анти-сквош, пропущенное anticipation, сломанные дуги. CX Codex +1 499установок timing-calibration Скилл разбирает жалобы «слишком быстро» и «слишком медленно» и подбирает длительности и easing по типу действия. CX Codex +1 497установок

Спонсоры проекта

Компании, которые помогают держать аналитику открытой