# whiteboard-animation

Скилл учит ИИ анимировать векторные рисунки и рукописный текст в стиле VideoScribe с рукой, держащей маркер. Помогает собирать скрайбинг-видео под закадровый голос.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1400 установок · ★ 56
- Автор: iart-ai
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/iart-ai/explainer-video-skills/tree/HEAD/skills/whiteboard-animation/SKILL.md
- Обновлён: 2026-06-22
- HTML: https://affpapa.org/nevibecode/skills/whiteboard-animation

## Что делает

Скилл задаёт логику для дудл-видео и скрайбинга на базе SVG. Векторные линии отрисовываются через управление свойством `stroke-dashoffset` от полной длины до нуля. Чтобы маркер следовал строго за остриём штриха, координаты берутся через `getPointAtLength(len * k)` с фиксированным смещением наконечника пера `NIB`.

Под капотом заложен строгий порядок: элементы появляются последовательно в порядке дикторского текста, по одному за раз. Для закрашенных областей сначала рисуется внешний контур, а заливка проявляется следом через прозрачность или маску. Переходы между сценами строятся через обратную отрисовку либо смахивание с помощью `clip-path`.

Использовать залитые составные фигуры здесь бессмысленно: для живой отрисовки арт придётся изначально подготовить как разомкнутые одинарные контуры. Иначе маркеру будет не по чему двигаться.

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add iart-ai/explainer-video-skills --skill whiteboard-animation -a claude-code
```

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add iart-ai/explainer-video-skills --skill whiteboard-animation -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add iart-ai/explainer-video-skills --skill whiteboard-animation -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install iart-ai/explainer-video-skills whiteboard-animation
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add iart-ai/explainer-video-skills --skill whiteboard-animation -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/iart-ai/explainer-video-skills --path skills/whiteboard-animation
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add iart-ai/explainer-video-skills --skill whiteboard-animation -a opencode
```

### Claude.ai

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

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/iart-ai/explainer-video-skills/tree/HEAD/skills/whiteboard-animation/SKILL.md

## Когда брать
- оживить векторный логотип или скетч эффектом рисования от руки
- синхронизировать появление рукописного текста с закадровым голосом
- привязать изображение руки с маркером к кончику рисуемой линии в SVG
- настроить переходы между сценами дудл-видео через стирание контуров

## Примеры запросов агенту
- Сделай whiteboard-анимацию для схемы архитектуры, чтобы контуры рисовала рука с маркером
- Анимируй появление рукописного текста по буквам в темпе начитки диктора
- Преврати этот SVG-набросок в дудл-видео со стиранием доски между блоками

## Похожие
- [logo-animation](https://affpapa.org/nevibecode/skills/logo-animation.md) — скилл · 2800 установок
- [svg-animation](https://affpapa.org/nevibecode/skills/svg-animation.md) — скилл · 2500 установок
- [animation-on-scroll](https://affpapa.org/nevibecode/skills/animation-on-scroll.md) — скилл · 2000 установок
- [animejs](https://affpapa.org/nevibecode/skills/animejs.md) — скилл · 2800 установок
- [gsap](https://affpapa.org/nevibecode/skills/mindrally-gsap.md) — скилл · 769 установок
- [anime-js](https://affpapa.org/nevibecode/skills/anime-js.md) — скилл · 736 установок

Из того же набора: [iart-ai/explainer-video-skills](https://affpapa.org/nevibecode/by/iart-ai/explainer-video-skills.md) — 5 карточек

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

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