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

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

Скилл объясняет, почему работают 12 принципов анимации: через восприятие, физику, эмоции и сторителлинг. Пригодится для обучения и наставничества.

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

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

Скилл разбирает философскую основу 12 принципов анимации. Squash and Stretch связывается с восприятием движения, anticipation — с предсказанием следующего момента, а staging — с ограниченной фокусной внимательностью. Follow Through, arcs и slow in/out объясняются через физику и ощущение правдоподобия.

Материал также сравнивает pose-to-pose как осознанную игру и straight ahead как поиск органичного поведения. Timing связывает скорость с эмоциональным восприятием, exaggeration — с компенсацией отсутствующего контекста, а appeal — с врождённым вниманием к лицам, движению и контрасту.

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

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

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

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

  • Объясни философскую основу принципов анимации через восприятие человека и сторителлинг.
  • Сравни pose-to-pose и straight ahead как два метода работы.
  • Разбери, почему staging и anticipation делают действие понятнее зрителю.

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

1Через Skills CLI (Vercel)

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

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

~/.claude/skills/master/SKILL.md

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

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

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

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

Выполните npx skills add dylantarre/animation-principles --skill animation-principles---master -a claude-code, затем проверьте файл ~/.claude/skills/master/SKILL.md.

Что делает Animation Principles - Master?

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

Для чего в скилле сравниваются pose-to-pose и straight ahead?

Сравнение показывает две разные философии работы: pose-to-pose строится на ясных намерениях и продуманных решениях, а straight ahead — на поиске возникающего поведения.

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

SKILL.md · MIT
---
name: Animation Principles - Master
description: Use when someone seeks the philosophical foundation of animation principles, wants to understand why they work, or is at a teaching/mentorship level
---

# The Philosophy Behind the Principles

Masters don't just apply principles - they understand their origins in human perception and storytelling. This is animation as visual psychology.

## Why the Principles Work

### Squash and Stretch: Persistence of Vision
The eye blurs motion. Stretch simulates motion blur our brains expect. Squash simulates impact compression we've observed since infancy. We're matching internal neural predictions.

### Anticipation: Predictive Processing
Human brains constantly predict next moments. Anticipation feeds this system information, making action legible. Without it, perception lags behind action.

### Staging: Attentional Bandwidth
Humans have limited focal attention. Staging respects cognitive constraints. It's not artistic preference - it's information architecture for biological processors.

### Method Philosophy
Pose-to-pose: Animation as acting - clear intentions, deliberate choices. Straight ahead: Animation as discovery - emergent behavior, organic evolution. Both philosophies are valid worldviews.

### Follow Through: Physics as Metaphor
Objects with follow through feel like they exist in a world with rules. Rules create believability. Even cartoon physics must be internally consistent.

### Slow In/Out: Natural Motion Universals
Almost nothing in nature moves at constant velocity. Ease reflects universal physics. It's not stylistic - it's the visual signature of mass and energy.

### Arcs: Gravitational Truth
Pendulums, projectiles, limbs - rotation and gravity create curves. Arcs are motion's natural signature. Linear paths require explanation.

### Secondary Action: Cognitive Depth
Humans assess situations through multiple channels simultaneously. Secondary action mimics this richness. Single-channel communication feels impoverished.

### Timing: Emotional Chronometry
We feel time differently based on emotional state. Animation timing recreates these subjective time distortions. Fast isn't always fast - it's how fast *feels*.

### Exaggeration: Perceptual Compensation
Animation lacks the subconscious information of reality - smell, peripheral vision, lived context. Exaggeration compensates for this perceptual deficit.

### Solid Drawing: Haptic Memory
We've touched things our whole lives. Solid drawing activates this tactile memory. Flat drawings exist only visually; solid drawings exist in imagined space.

### Appeal: Evolved Attention
We're wired to watch certain things: faces, movement, contrast, pattern. Appeal hijacks evolved attention systems. It's neuroaesthetics.

## The Unified Principle

All 12 principles serve one master: **believable change over time**. They are observation and empathy codified. Animation is applied psychology drawn 24 times per second.

Animation masters don't think in principles anymore. They think in emotion, story, truth. The principles become unconscious, like grammar to a poet.

© 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

urgency-action Задаёт правила анимации интерфейса для привлечения внимания и быстрой реакции. Пригодится при вёрстке таймеров и кнопок оформления заказа. CX Codex +1 499установок Animation Principles - Teaching Others Помогает объяснить 12 принципов анимации ученикам, менти и коллегам разного уровня: что показать первым и на чём обычно спотыкаются. CX Codex +1 498установок user-feedback-clarity Скилл для ИИ-агента, который разбирает, почему пользователи не замечают отклик интерфейса, и подсказывает, как это исправить. CX Codex +1 498установок lists-grids Помогает настроить анимацию списков, таблиц и сеток по 12 принципам диснеевской мультипликации. Пригодится при фильтрации данных и перетаскивании карточек. CX Codex +1 498установок power-confidence Скилл задаёт правила анимаций, которые читаются как сила и власть: тяжёлое движение, резкая остановка, минимум отскока. Пригодится на hero-секциях и витринах премиум-продуктов. CX Codex +1 497установок continuous-loops Скилл учит агента создавать зацикленные CSS-анимации по принципам классической мультипликации. Пригодится для лоадеров, пульсаций, шиммеров и фоновых эффектов. CX Codex +1 497установок universal-patterns Задаёт базовые длительности, кривые изинга и 12 принципов анимации для любого движения в интерфейсе. Пригодится, когда агент пишет CSS-переходы и не угадывает с таймингом. CX Codex +1 496установок secondary-action-mastery Скилл учит добавлять вторичное движение так, чтобы оно поддерживало главное действие, а не спорило с ним. Пригодится в UI-анимации и игровом филе. CX Codex +1 496установок

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

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