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

Animation Principles - Intermediate — скилл для Claude Code

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

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

Что делает Animation Principles - Intermediate

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

Материал разбирает типичные сбои при комбинировании. Избыточное упреждение перед каждым движением убивает спонтанность, а нескоординированные вторичные действия рассеивают внимание зрителя. Для практики предложена пошаговая раскадровка посадки персонажа на стул. Сначала блокинг. Затем отдельные проходы полировки для каждой группы принципов.

Руководство требует уверенного владения базой: без знания отдельных правил применять эти связки не получится.

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

  • Согласовать размах упреждения с инерцией захлёста
  • Выстроить иерархию во вторичных движениях персонажа
  • Распределить замедление и ускорение вдоль траектории дуги
  • Объединить ключевые позы компоновки со сквозной анимацией нахлёстов

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

  • Проверь тайминг и дуги в сцене, где персонаж садится на стул
  • Помоги сбалансировать упреждение и захлёст для анимации прыжка
  • Разбей движение персонажа на блокинг и проходы полировки по принципам

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

1Через Skills CLI (Vercel)

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

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

~/.claude/skills/intermediate/SKILL.md

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

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

Вопросы о Animation Principles - Intermediate

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

Выполните команду npx skills add dylantarre/animation-principles --skill animation-principles---intermediate -a claude-code. Также можно вручную добавить файл ~/.claude/skills/intermediate/SKILL.md.

Зачем нужен этот скилл?

Он учит соединять отдельные правила анимации в единую систему, чтобы движения не выглядели механическими или перегруженными деталями.

Как скилл предлагает комбинировать позы и прямое движение?

Сначала выставляются основные ключевые позы персонажа методом pose-to-pose. Затем поверх них сквозным способом straight ahead анимируются нахлёсты и вторичные элементы вроде волос или одежды.

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

SKILL.md · MIT
---
name: Animation Principles - Intermediate
description: Use when someone has working knowledge of animation principles and needs guidance on combining them effectively in more complex animations
---

# Combining Principles for Stronger Animation

You can apply individual principles. Now learn to weave them together and understand their interdependencies.

## Principle Synergies

### Squash/Stretch + Timing
Volume preservation is key. Faster motion = more stretch. The timing dictates the degree. A 2-frame anticipation needs less squash than a 6-frame one.

### Anticipation + Follow Through
These are mirrors. Anticipation magnitude should roughly match follow through. Big wind-up = big settle. They create rhythmic bookends to any action.

### Staging + Secondary Action
Secondary actions must support staging, never compete. If staging says "look at the face," secondary action in hands should point attention there, not away.

### Arcs + Slow In/Out
Arcs aren't uniform speeds. Apply easing along the arc path. Spacing should bunch at start/end of the arc, spread in the middle.

### Pose to Pose + Straight Ahead
Hybrid approach: Key poses first (pose-to-pose), then animate overlapping elements straight ahead. Best of both: structure with spontaneity.

## Common Combination Mistakes

**Over-anticipation:** When every action has massive wind-up, nothing feels spontaneous. Reserve big anticipation for big payoffs.

**Competing secondary actions:** Three things moving differently splits attention. Hierarchy matters - one leads, others support.

**Uniform timing:** Every action at 12 frames feels mechanical. Vary your timing: quick decisions, slow realizations.

**Arc neglect in follow through:** The main action arcs beautifully, then appendages move linearly. Everything arcs.

## The 12 Principles by Function

**Physics:** Squash/Stretch, Timing, Arcs, Slow In/Out
**Clarity:** Staging, Solid Drawing, Anticipation
**Interest:** Secondary Action, Exaggeration, Appeal
**Technique:** Straight Ahead/Pose to Pose, Follow Through/Overlap

## Integration Exercise

Animate a character sitting down:
1. **Staging:** Camera angle shows full body profile
2. **Anticipation:** Slight upward before descent
3. **Arcs:** Hips trace a curved path down
4. **Timing:** Faster drop, slower settle
5. **Squash:** Compress on contact
6. **Follow Through:** Arms/head continue after hips land
7. **Overlapping:** Hair settles last
8. **Secondary:** Adjusting clothing
9. **Slow Out:** Gradual stop to final pose

Layer principles one at a time. Blocking first, then refinement passes for each principle category.

© dylantarre · MIT · dylantarre/animation-principles

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

Всё по теме «Дизайн» →
animation-principles iart-ai Скилл задаёт физику и тайминги интерфейсной анимации. Он выдаёт точные кривые cubic-bezier, задержки шагов и длительности в миллисекундах. CX Codex +1 3 000установок 12-principles-of-animation raphael-salaja Находит ошибки в веб-анимациях по двенадцати принципам движения. Выводит список замечаний с номерами строк и сводную таблицу нарушений. CX Codex +1 2 200установок isometric-animation iart-ai Скилл для изометрических и 2.5D-анимаций: стопки слоёв, выдавленные блоки, взрывные схемы и лёгкий дрейф камеры. Собирается в один HTML-файл без сборки. CX Codex +1 1 400установок threejs-animation CloudAI-X Скилл для работы с keyframe-анимацией, костями и морф-целями в Three.js. Помогает воспроизводить glTF-анимации, управлять костями скелета, миксировать и кроссфейдить клипы на WebGL и WebGPU. CX Codex +1 20 400установок unity-animation gamedev-skills Ведёт агента по Animator Controllers в Unity 6.3 LTS: параметры, переходы, blend trees, слои и humanoid IK. Пригодится, когда один персонаж должен ходить, прыгать и целиться из общей стейт-машины. CX Codex +1 6 000установок 3d-animation-short-generator MiniMax-AI Ведёт от одной фразы-идеи до готового короткого 3D-мультфильма: раскадровка, карточки персонажей, генерация клипов и сборка с музыкой. CX Codex +1 3 500установок

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

Animation Principles - Advanced Скилл для тех, кто уже знает базовые принципы анимации и хочет разобраться в нюансах: скрытый squash/stretch, отсутствие anticipation, сломанные арки. CX Codex +1 492установок emotional-disconnect Разбирает, почему анимация в интерфейсе ощущается неправильно, и подбирает движение под нужную эмоцию. Пригодится, когда UI называют холодным или раздражающим. CX Codex +1 491установок state-changes Скилл для анимации элементов, которые меняются на месте: переключатели, аккордеоны, чекбоксы, состояния кнопок. Пригодится, когда интерфейсу нужны плавные переходы без входа и выхода. CX Codex +1 491установок responsive-adaptive Скилл настраивает адаптивную длительность анимаций в зависимости от размера экрана, расстояния перемещения и настройки prefers-reduced-motion. CX Codex +1 491установок Animation Principles - Deep Dive Скилл-справочник по 12 принципам анимации Диснея с техническими деталями: пропорции, тайминги, дуги, реализация в кадрах. Пригодится, когда агенту нужен контекст по анимации. CX Codex +1 490установок Animation Principles - Novice Скилл разбирает 12 принципов анимации и даёт конкретные упражнения, чтобы применить их в простых проектах. Пригодится, когда база уже есть, а практики не хватает. CX Codex +1 490установок professionalism-credibility Задаёт правила сдержанной анимации интерфейса для B2B-продуктов, банков и госсервисов. Помогает настроить переходы, которые экономят время пользователя. CX Codex +1 490установок Animation Principles - Absolute Beginner Объясняет 12 принципов анимации самыми простыми словами. Пригодится, если вы впервые берётесь за движение в интерфейсе или игре. CX Codex +1 489установок

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

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