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

follow-through-overlapping — скилл для Claude Code: что делает

Скилл учит агента принципам инерции и смещения фаз в анимации. Пригодится при вёрстке интерфейсных переходов, раскадровке персонажей и кинетической типографике.

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

Что делает follow-through-overlapping

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

Для расчёта смещения скилл предлагает сдвиг на 2–4 кадра (при 24fps) для каждого уровня иерархии. Затухание строится через кривые ease-out с лёгким перехлёстом, чтобы избежать резких и неестественных остановок. Без распределения по слоям анимация выглядит механической и деревянной.

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

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

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

  • Рассчитай покадровое смещение для анимации ткани плаща за бегущим персонажем при 24fps
  • Добавь овершут и затухание для закрытия модального окна через CSS transition
  • Настрой каскадное появление карточек в списке с задержкой по иерархии слоёв

Как установить follow-through-overlapping

1Через Skills CLI (Vercel)

npx skills add dylantarre/animation-principles --skill follow-through-overlapping -a claude-code

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

~/.claude/skills/follow-through-overlapping/SKILL.md

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

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

Вопросы о follow-through-overlapping

Как установить follow-through-overlapping в Claude Code?

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

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

Он передаёт агенту правила физики движения: сквозное движение (follow through) и захлёст (overlapping action). Агент использует их, чтобы элементы сцены останавливались плавно и с разной скоростью.

Как скилл рассчитывает задержку между деталями?

Для каждого уровня иерархии задаётся смещение на 2–4 кадра при базовой частоте 24fps. Основное тело начинает движение на первом кадре, а второстепенные части — на четвёртом или шестом.

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

SKILL.md · MIT
---
name: follow-through-overlapping
description: Use when animating multi-part objects, character appendages, fabric, hair, or any motion requiring realistic drag, momentum, and settling behavior.
---

# Follow Through & Overlapping Action Mastery

## The Momentum Principle

Nothing stops all at once. When a character halts, their hair keeps moving. When a car brakes, passengers lurch forward. Follow through and overlapping action capture how different parts of a system respond to forces at different rates—the principle that makes animation feel physically grounded.

## Core Theory: Two Related Concepts

**Follow Through**: When the main body stops, appendages continue moving due to momentum, then settle. The termination behavior of motion.

**Overlapping Action**: Different parts move at different rates throughout motion, not just at stops. Hair doesn't start moving when the head starts—it drags behind, then catches up. The continuous offset of timing.

## The Drag Hierarchy

Parts further from the root of motion drag more:
1. **Root** (hips, torso): Moves first, stops first
2. **Primary extensions** (limbs, head): Slight delay
3. **Secondary extensions** (hands, facial features): More delay
4. **Tertiary elements** (fingers, hair, cloth): Maximum drag

Each level follows the previous, creating cascading waves of motion.

## Physical Properties Affecting Drag

- **Mass**: Heavier elements have more follow through
- **Flexibility**: Softer materials show more overlapping action
- **Air resistance**: Flat/wide surfaces drag more
- **Attachment point**: Loose connections create greater offset

## Interaction with Other Principles

**Timing defines follow through duration**: Fast stops = long follow through; slow stops = subtle settling.

**Arcs govern the follow through path**: Appendages swing through curved trajectories, not linear ones.

**Secondary action is often follow through**: The supporting motion that enriches without distracting.

**Squash/stretch appears in settling**: Objects compress slightly when follow through terminates.

## Domain Applications

### UI/Motion Design
- List scrolling: inertial continuation past finger release
- Card stacks: sequential settling with offset timing
- Modal dismissal: background elements settle after foreground
- Pull-to-refresh: elastic overshoot and return
- Notification badges: bounce and settle on count change

### Character Animation
- Hair and cloth simulation: constant overlapping action
- Tail motion: follows body path with significant delay
- Facial features: cheeks, jowls follow head rotation
- Walk cycles: arm swing offsets from leg timing
- Jump landing: body compresses, then appendages catch up

### Logo and Typography
- Word reveals: letters arrive with staggered settling
- Logo builds: elements land sequentially, each with follow through
- Kinetic typography: phrases move with internal timing offsets

### Physics-Based UI
- Drag and drop: object continues briefly past release point
- Elastic boundaries: content follows finger, then snaps back
- Spring animations: natural overshoot and settling

## Common Mistakes

1. **Everything stopping simultaneously**: Creates robotic, mechanical feel
2. **Excessive follow through**: Elements feel disconnected, floaty
3. **No hierarchy**: All parts moving with same delay
4. **Linear settling**: Follow through should ease out, not stop abruptly

## The Stagger Formula

For believable overlapping action, offset secondary elements by 2-4 frames (at 24fps) per level of hierarchy. Root moves on frame 1, primary on frame 2-3, secondary on frame 4-6, tertiary on frame 6-10.

## The Settling Curve

Follow through should never snap to rest. Use ease-out curves with slight overshoot:
- Quick initial movement past rest position
- Slower return toward rest
- Possible micro-overshoot in opposite direction
- Final ease to stillness

## Implementation Heuristic

Identify all elements that could move independently. Assign each a drag value based on mass, flexibility, and distance from root. Apply timing offsets proportional to drag. Add settling oscillation to termination. When motion feels stiff, you probably need more overlapping action.

© dylantarre · MIT · dylantarre/animation-principles

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

Все скиллы по теме «Фронтенд и UI» →
motion-design LottieFiles Скилл помогает проектировать анимации интерфейса: выбирать длительность, easing и последовательность движения. Пригодится для микровзаимодействий, загрузки и переходов между страницами. CX Codex +1 19 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установок animation-principles iart-ai Скилл задаёт физику и тайминги интерфейсной анимации. Он выдаёт точные кривые cubic-bezier, задержки шагов и длительности в миллисекундах. CX Codex +1 3 000установок emil-design-eng emilkowalski Скилл задаёт правила для полировки интерфейсов, компонентов и анимаций. Пригодится, когда UI работает, но требует более точных состояний и переходов. CX Codex +1 388 200установок review-animations emilkowalski Проверяет код интерфейсных анимаций по принципам Эмиля Ковальски. Помогает убрать дерганые переходы, медленный ease-in и лишнюю нагрузку на процессор. CX Codex +1 256 500установок

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

performance-optimization Помогает находить и устранять просадки FPS и рывки в анимациях интерфейса по принципам Диснея. CX Codex +1 516установок react-spring Скилл показывает, как собрать все 12 принципов анимации Disney на физике пружин React Spring — с готовыми примерами под каждый принцип. CX Codex +1 516установок anticipation-mastery Скилл объясняет принцип anticipation и подсказывает агенту, где добавить подготовительное движение, чтобы анимация не выглядела резкой. CX Codex +1 516установок enterprise-b2b Скилл задаёт правила анимации для B2B-интерфейсов и панелей управления. Помогает выстроить переходы и тайминги без лишней декоративности. CX Codex +1 515установок cards-containers Набор правил анимации карточек, плиток и контейнеров по 12 принципам Диснея. Помогает настроить физику перетаскивания, подъём при наведении и раскрытие списков. CX Codex +1 513установок universal-emotion Скилл переводит заданную эмоцию в параметры анимации: тайминги, изинг, деформацию. Пригодится, когда нужно, чтобы интерфейс ощущался спокойным, резким или игривым. CX Codex +1 511установок timing-principle-mastery Скилл обучает ассистента подбирать точную длительность и ритм анимаций в интерфейсах или играх. Помогает настроить переходы, когда движение кажется слишком резким или затянутым. CX Codex +1 510установок forms-inputs Скилл учит агента анимировать поля ввода, текстовые области и селекты: подсказки по таймингам, состояниям и CSS-переходам для понятной обратной связи. CX Codex +1 509установок

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

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