Animation Principles - Deep Dive — скилл для Claude Code: справочник
Скилл-справочник по 12 принципам анимации Диснея с техническими деталями: пропорции, тайминги, дуги, реализация в кадрах. Пригодится, когда агенту нужен контекст по анимации.
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Что делает 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-codenpx skills add dylantarre/animation-principles --skill deep-dive -a claude-code2Вручную: положить файлы
~/.claude/skills/deep-dive/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/deep-dive/
1Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill deep-dive -a codex2Вручную: положить файлы
.agents/skills/deep-dive/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill deep-dive -a cursor2Вручную: положить файлы
.cursor/skills/deep-dive/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install dylantarre/animation-principles deep-dive2Вручную: положить файлы
.github/skills/deep-dive/SKILL.md1Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill deep-dive -a gemini-cli2Командой платформы
gemini skills install https://github.com/dylantarre/animation-principles --path skills/04-by-skill-level/deep-diveВручную: положить файлы
.devin/skills/deep-dive/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill deep-dive -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Из того же набора86
Похожие
Рядом в теме «Дизайн»
Всё по теме «Дизайн» →Вопросы о 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