# popmotion

Скилл учит агента применять 12 принципов анимации Диснея с помощью библиотеки Popmotion. Пригодится для настройки плавной физики интерфейсов и ключевых кадров.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 489 установок · ★ 129
- Автор: dylantarre
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/dylantarre/animation-principles/tree/HEAD/skills/09-by-tool-framework/popmotion/SKILL.md
- Обновлён: 2025-12-30
- HTML: https://affpapa.org/nevibecode/skills/popmotion

## Что делает

Скилл даёт готовые шаблоны кода для двенадцати правил анимации на Popmotion. В их числе сжатие и растяжение, упреждение, сценичность и сквозное движение. В примерах задействованы функции `animate()`, `keyframes()` и физика `spring()`.

Код меняет стили элементов напрямую через `transform` и `opacity`. Библиотека не привязана к UI-фреймворкам, но сам пакет `popmotion` должен быть добавлен в проект, иначе примеры не запустятся.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill popmotion -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/popmotion/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/popmotion/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill popmotion -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/popmotion/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill popmotion -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/popmotion/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install dylantarre/animation-principles popmotion
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/popmotion/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill popmotion -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/dylantarre/animation-principles --path skills/09-by-tool-framework/popmotion
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/popmotion/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill popmotion -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/dylantarre/animation-principles/tree/HEAD/skills/09-by-tool-framework/popmotion/SKILL.md

## Когда брать
- Настроить физические пружинные анимации интерфейса через `spring()`
- Реализовать упреждение и отдачу для интерактивных кнопок
- Собрать многоэтапные перемещения элементов по траекториям с помощью `keyframes()`
- Создать эффект наложения и задержки для связанных деталей

## Примеры запросов агенту
- Сделай анимацию карточки при клике с пружинным овершутом через Popmotion.
- Напиши цепочку keyframes для движения плашки по дуге.
- Добавь упреждение перед вылетом модального окна.

## Похожие
- [react-spring-physics](https://affpapa.org/nevibecode/skills/react-spring-physics.md) — скилл · 2400 установок
- [gsap-scrolltrigger](https://affpapa.org/nevibecode/skills/gsap-scrolltrigger.md) — скилл · 72800 установок
- [gsap-timeline](https://affpapa.org/nevibecode/skills/gsap-timeline.md) — скилл · 69700 установок
- [animejs](https://affpapa.org/nevibecode/skills/animejs.md) — скилл · 2800 установок
- [animation-on-scroll](https://affpapa.org/nevibecode/skills/animation-on-scroll.md) — скилл · 2000 установок
- [gsap](https://affpapa.org/nevibecode/skills/mengto-gsap.md) — скилл · 1800 установок

Из того же набора: [dylantarre/animation-principles](https://affpapa.org/nevibecode/by/dylantarre/animation-principles.md) — 142 карточки

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md