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

Animation Principles - Deep Dive — скилл для Claude Code: справочник

Скилл-справочник по 12 принципам анимации Диснея с техническими деталями: пропорции, тайминги, дуги, реализация в кадрах. Пригодится, когда агенту нужен контекст по анимации.

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

Что делает Animation Principles - Deep Dive

Скилл даёт агенту развёрнутый материал по 12 принципам анимации: от squash and stretch до appeal. По каждому принципу — определение, техническая реализация и области применения. Например, для squash and stretch указано, что объём сохраняется, растяжение идёт по траектории движения в пиках скорости, а сжатие — перпендикулярно поверхности удара. Пропорции советует держать в диапазоне 20-50% для мультяшного стиля и 5-15% для реалистичного.

Есть конкретика по таймингам: 1-2 кадра читаются как мгновение, 4-6 — как резкое движение, 8-12 — обычное действие, 16-24 — медленное и тяжёлое, 24 и больше — намеренно замедленное. Для anticipation типичное соотношение — 1:3 кадра подготовки к основному действию. Раздел про straight ahead и pose to pose объясняет разницу подходов и гибридный вариант.

Это справочник, а не генератор кода. Скилл не создаёт анимацию и не подключается к движку — он даёт агенту терминологию и числа, чтобы тот точнее отвечал на вопросы о движении. Если анимацией вы не занимаетесь, ставить нечего: пользы в других задачах не будет.

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

  • объяснить агенту, что такое squash and stretch, с конкретными пропорциями
  • подобрать число кадров под нужную скорость движения
  • разобрать разницу между straight ahead и pose to pose
  • проверить силуэт позы на читаемость
  • выстроить иерархию follow through и overlapping action

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

  • Объясни принцип squash and stretch и какие пропорции использовать для мультяшного стиля
  • Сколько кадров займёт резкий удар, а сколько — тяжёлое падение?
  • Разбери по шагам, как работает anticipation перед прыжком

Как установить Animation Principles - Deep Dive

1Через Skills CLI (Vercel)

npx skills add dylantarre/animation-principles --skill animation-principles---deep-dive -a claude-code
npx skills add dylantarre/animation-principles --skill deep-dive -a claude-code

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

~/.claude/skills/deep-dive/SKILL.md

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

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

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

Animation Principles - Troubleshooting Скилл разбирает, почему анимация выглядит неправильно, и подсказывает, какой принцип нарушен. Пригодится, когда движение «не читается», но причина неясна. CX Codex +1 490установок Animation Principles - Advanced Скилл для тех, кто уже знает базовые принципы анимации и хочет разобраться в нюансах: скрытый squash/stretch, отсутствие anticipation, сломанные арки. CX Codex +1 489установок emotional-disconnect Разбирает, почему анимация в интерфейсе ощущается неправильно, и подбирает движение под нужную эмоцию. Пригодится, когда UI называют холодным или раздражающим. CX Codex +1 488установок state-changes Скилл для анимации элементов, которые меняются на месте: переключатели, аккордеоны, чекбоксы, состояния кнопок. Пригодится, когда интерфейсу нужны плавные переходы без входа и выхода. CX Codex +1 489установок Animation Principles - Novice Скилл разбирает 12 принципов анимации и даёт конкретные упражнения, чтобы применить их в простых проектах. Пригодится, когда база уже есть, а практики не хватает. CX Codex +1 488установок Animation Principles - Absolute Beginner Объясняет 12 принципов анимации самыми простыми словами. Пригодится, если вы впервые берётесь за движение в интерфейсе или игре. CX Codex +1 486установок technical-constraints Скилл для случаев, когда анимация упирается в поддержку браузеров, возможности платформы или технические требования. Помогает сохранить замысел, не ломая сборку. CX Codex +1 487установок comfort-safety Скилл для ИИ-кодинга, который задаёт правила анимаций в интерфейсах, где пользователю важно чувствовать себя в безопасности. CX Codex +1 486установок

Похожие

animation-principles Owl-Listener Скилл для настройки одной конкретной анимации в интерфейсе: подбирает easing, длительность и порядок движения элементов. CX Codex +1 2 200установок 12-principles-of-animation raphael-salaja Находит ошибки в веб-анимациях по двенадцати принципам движения. Выводит список замечаний с номерами строк и сводную таблицу нарушений. CX Codex +1 2 200установок nansen-wallet-deep-dive nansen-ai Скилл прогоняет кошелёк по меткам, балансу, PnL, транзакциям, перп-позициям и контрагентам через CLI Nansen. Пригодится, когда надо понять, кто стоит за адресом. CX Codex +1 383установок isometric-animation iart-ai Скилл для изометрических и 2.5D-анимаций: стопки слоёв, выдавленные блоки, взрывные схемы и лёгкий дрейф камеры. Собирается в один HTML-файл без сборки. CX Codex +1 1 400установок editorial-burgundy-principles-template nexu-io Создаёт трёхслайдовую презентацию в бордовой и розовой гамме для манифестов, принципов и культурных нарративов. Готовая HTML-страница с навигацией и сеткой карточек. CX Codex +1 2 700установок design-principles Owl-Listener Помогает зафиксировать рабочие принципы дизайна для разрешения споров в команде. Пригодится, когда одни и те же решения приходится обсуждать снова и снова. CX Codex +1 2 100установок

Рядом в теме «Дизайн»

Всё по теме «Дизайн» →

Вопросы о Animation Principles - Deep Dive

Как установить Animation Principles - Deep Dive в Claude?

Через npx skills add dylantarre/animation-principles --skill deep-dive -a claude-code. Файл скилла окажется в ~/.claude/skills/deep-dive/SKILL.md.

Что делает этот скилл?

Даёт агенту справочник по 12 принципам анимации с техническими деталями: пропорции деформации, диапазоны кадров, работа с дугами и вторичными действиями.

На каких платформах он работает?

Кроме Claude есть установка для Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode. Для GitHub Copilot команда другая: gh skill install dylantarre/animation-principles deep-dive.

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

SKILL.md · MIT
---
name: Animation Principles - Deep Dive
description: Use when someone needs comprehensive reference material on animation principles with technical depth and extensive context
---

# Complete Animation Principles Reference

Comprehensive technical guide to Disney's 12 principles with implementation details.

## 1. Squash and Stretch

**Definition:** Deformation of objects to show flexibility, weight, and motion.

**Technical implementation:**
- Volume must remain constant (area preserved)
- Stretch along motion path at velocity peaks
- Squash perpendicular to impact surface
- Ratio guidelines: 20-50% for cartoony, 5-15% for realistic

**Applications:** Facial expressions, body mechanics, object interactions, impact effects.

## 2. Anticipation

**Definition:** Preparatory action preceding main action.

**Technical implementation:**
- Direction opposite to main action
- Duration proportional to action magnitude
- Typical ratio: 1:3 anticipation to action frames
- Can be minimized for surprise effects

**Applications:** Jumps, throws, emotional shifts, scene transitions.

## 3. Staging

**Definition:** Presentation of idea for maximum clarity.

**Technical implementation:**
- Silhouette test: action readable as solid black shape
- Single focal point per composition
- Background contrast supports subject
- Camera angle serves story point

**Applications:** Every shot, pose choice, camera placement, lighting design.

## 4. Straight Ahead and Pose to Pose

**Definition:** Two fundamental animation approaches.

**Straight ahead:** Sequential frame creation. Organic, spontaneous, harder to control timing.
**Pose to pose:** Key poses first, breakdowns second, inbetweens last. Controlled, plannable, can feel stiff.
**Hybrid:** Keys pose-to-pose, overlapping elements straight ahead.

## 5. Follow Through and Overlapping Action

**Definition:** Continuation of motion after primary action stops.

**Technical implementation:**
- Drag: appendages trail behind main mass
- Follow through: continuation past stop point
- Overlap: different parts move at different rates
- Settle: oscillating return to rest

**Hierarchy:** Root leads, extremities follow. Heavy before light.

## 6. Slow In and Slow Out

**Definition:** Spacing variation showing acceleration/deceleration.

**Technical implementation:**
- Ease in: bunched drawings at motion start
- Ease out: bunched drawings at motion end
- Middle drawings spread apart (fast portion)
- Custom curves for specific effects (bounce, snap, drift)

## 7. Arc

**Definition:** Curved motion paths reflecting natural movement.

**Technical implementation:**
- Track motion paths for all moving elements
- Arcs created by rotation around joints
- Projectiles follow parabolic arcs
- Breaking arcs: mechanical, sudden, intentional effects

## 8. Secondary Action

**Definition:** Actions supporting primary without distracting.

**Technical implementation:**
- Subordinate timing to primary action
- Support emotional content of scene
- Add on separate pass after primary is working
- Remove if it competes for attention

## 9. Timing

**Definition:** Frame count determining speed and weight.

**Reference points:**
- 1-2 frames: instant/invisible
- 4-6 frames: fast/snappy
- 8-12 frames: normal action
- 16-24 frames: slow/heavy
- 24+ frames: very slow/deliberate

Context-dependent: same frame count reads differently based on action type.

## 10. Exaggeration

**Definition:** Amplification of reality for clarity and impact.

**Technical implementation:**
- Identify essence of action/emotion
- Push poses beyond realistic range
- Maintain internal consistency
- Style-appropriate: match project aesthetic

## 11. Solid Drawing

**Definition:** Three-dimensional form and weight in drawings.

**Technical implementation:**
- Consistent volume through motion
- Anatomical understanding (bones, muscles)
- Weight distribution and balance
- Perspective and foreshortening accuracy

## 12. Appeal

**Definition:** Compelling quality that attracts viewer attention.

**Technical implementation:**
- Clear, readable shapes
- Distinctive silhouettes
- Asymmetry in poses and design
- Appropriate complexity level (simple reads faster)

Appeals to: visual interest, emotional connection, design quality.

© dylantarre · MIT · dylantarre/animation-principles

Смотрите также

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

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