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

timing-mastery — скилл для Claude Code: что делает и как установить

Задаёт ритм и длительность движений в анимации через расчёт кадров. Помогает настроить темп жестов, пауз и акцентов.

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

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

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

Внутри собраны практические правила для двух частых проблем: слишком быстрой суеты и вязкой медлительности. Если действие ощущается смазанным, скилл советует добавить 2–4 кадра удержания ключевой позы или замедлить выход из движения. Для вялых сцен даны советы по вырезанию промежуточных фаз и усилению контраста между быстрыми и медленными отрезками.

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

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

  • Рассчитать число кадров для моргания, шага или сильного удара
  • Замедлить суетливое движение через удержание ключевых поз
  • Ускорить вязкую анимацию за счёт сокращения промежуточных фаз
  • Выстроить паузы для комических и драматических сцен

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

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

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

1Через Skills CLI (Vercel)

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

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

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

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

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

Вопросы о timing-mastery

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

Выполните команду npx skills add dylantarre/animation-principles --skill timing-mastery -a claude-code. Файл инструкции сохранится по пути ~/.claude/skills/timing-mastery/SKILL.md.

Что делает скилл timing-mastery?

Он даёт ИИ правила расчёта кадров и длительности анимации, связывая скорость движений с их весом и эмоциональным тоном.

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

Для моргания отводится 2–4 кадра, для короткого жеста — от 6 до 8, а на один шаг в цикле походки закладывается 12–16 кадров.

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

SKILL.md · MIT
---
name: timing-mastery
description: Use when determining how fast or slow motion should be—pacing action sequences, dramatic pauses, comedic beats, or any situation where the duration of movement matters.
---

# Timing Mastery

Think like a drummer. Animation is rhythm made visible. The space between beats matters as much as the beats themselves.

## Core Mental Model

Before animating anything, ask: **How many frames does this deserve?**

Timing is the soul of animation. The same motion at different speeds tells completely different stories. Fast = light, urgent, comedic. Slow = heavy, dramatic, thoughtful.

## The 12 Principles Through Timing

**Timing** — The principle itself. Count frames obsessively. A 6-frame action feels snappy. A 24-frame action feels deliberate. Know the vocabulary of duration.

**Slow In & Slow Out** — Time is elastic at the edges. Actions ease into existence and settle out of motion. The middles can be fast, but beginnings and endings need breath.

**Anticipation** — Timing creates suspense. Hold the anticipation longer than feels comfortable. The audience's tension builds in the pause before release.

**Follow Through & Overlapping Action** — Stagger your timing. Not everything arrives at once. Lead with the main action, let secondary elements catch up on their own schedules.

**Secondary Action** — Time secondary elements to complement, not compete. They should land slightly after the primary beat, like harmony following melody.

**Staging** — Give the audience time to read. Fast cutting confuses. Hold important poses long enough for comprehension. Clarity requires duration.

**Exaggeration** — Timing amplifies exaggeration. A long anticipation followed by instant action creates snap. Stretch time to stretch impact.

**Squash & Stretch** — Speed determines deformation. Fast motion = more stretch. Impact = instant squash. The timing of shape change sells velocity.

**Arcs** — Speed varies along the arc. Fastest at the bottom of a swing, slowest at the apex. Timing follows the physics of pendulums.

**Appeal** — Rhythmic motion is appealing. Characters with good timing feel alive. Arrhythmic timing creates unease (useful for villains or horror).

**Straight Ahead & Pose to Pose** — Time your key poses first (pose to pose), then decide how many frames connect them. Or discover timing organically (straight ahead) and refine.

**Solid Drawing** — Volume must read at speed. Fast-moving objects need exaggerated stretch or motion blur. Solid drawing at the wrong timing looks frozen.

## Practical Application

When action feels "rushed":
1. Add more frames to anticipation
2. Hold key poses 2-4 frames longer
3. Slow the ease-out to let actions settle
4. Insert "moving holds" instead of dead stops

When action feels "sluggish":
1. Reduce in-between frames
2. Cut anticipation duration
3. Increase contrast between fast and slow sections
4. Remove frames from less important movements

**Timing Chart:**
- Blink: 2-4 frames
- Quick gesture: 6-8 frames
- Walk cycle: 12-16 frames per step
- Emotional reaction: 8-12 frames + hold
- Heavy impact: 2 frames contact, 12+ frames settle

## The Golden Rule

**Timing is relative.** Fast only feels fast next to slow. Build contrast. Let quiet moments make loud moments louder. A pause before a punchline is what makes it land.

© 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установок

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

rive-animations Скилл помогает агенту собрать анимацию в Rive по 12 принципам Disney: стейт-машины, инпуты, тайминги и React-обвязка. CX Codex +1 564установок notifications-toasts Скилл учит ИИ-агента анимировать тосты и системные уведомления по 12 принципам классической анимации. Пригодится при вёрстке всплывающих окон в UI. CX Codex +1 561установок frontend-developer Скилл помогает реализовать интерфейсные анимации и переходы по 12 классическим принципам в веб- и мобильных приложениях. Пригодится при настройке микроанимаций кнопок и карточек. CX Codex +1 558установок navigation-menus Скилл для анимации навбаров, меню и сайдбаров: тайминги, кривые и состояния переходов по принципам Disney. CX Codex +1 557установок buttons-ctas Скилл для ИИ-кодинга, который подсказывает агенту, как анимировать кнопки и CTA: состояния, тайминги, CSS-переходы. CX Codex +1 552установок figma-prototyping Скилл подсказывает агенту, как собрать прототип в Figma по 12 принципам анимации Диснея — через Smart Animate и варианты компонентов. CX Codex +1 550установок brand-marketing Скилл переносит 12 диснеевских принципов анимации в коммерческое видео, рекламу и айдентику. Задаёт чёткие тайминги для логотипов и бренд-стилей. CX Codex +1 545установок motion-one Скилл показывает, как собрать 12 принципов анимации Диснея на библиотеке Motion One — от squash and stretch до stagger и scroll. CX Codex +1 544установок

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

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