# caption-animation

Скилл для пословной анимации субтитров: слово появляется на своём слоге, активное подсвечивается, текст держится в безопасной зоне 9:16.

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

## Что делает

Скилл превращает транскрипт или озвучку в субтитры с пословным таймингом. Каждое слово всплывает со шкалой от 60% до 100% и лёгким перелётом, активное слово подсвечивается одним акцентным цветом. Слова группируются в страницы по 1–4 штуки, чтобы текст не превращался в стену.

Пайплайн такой: транскрипция через Whisper или AssemblyAI даёт пословные метки, токены приводятся к типу `{ text, startMs, endMs }`, страницы собирает `createTikTokStyleCaptions()`, анимацию даёт `spring()` в Remotion или CSS-кейфрейм с `animation-delay` по `startMs`. Для вертикали 1080×1920 скилл задаёт жирный шрифт 56–80px, обводку 2–6px и центральную полосу на 62–70% высоты — нижние 280px остаются под интерфейс платформы.

Если у вас только построчные SRT-реплики, придётся перетранскрибировать: равномерное деление строки по длительности даёт заметный дрейф, и караоке рассыпается. Скилл советует `medium.en` вместо `large` для чистого голоса. На выходе можно получить и вжжённые в MP4 субтитры для соцсетей, и отдельный SRT/VTT для доступности и SEO.

## Установка

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

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

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

### Codex

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

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

### Cursor

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

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

### GitHub Copilot

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

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

### Gemini CLI

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

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

### Windsurf (Devin Desktop)

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

### OpenCode

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

### Claude.ai

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

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

## Когда брать
- сделать пословные караоке-субтитры для вертикального видео
- вжечь анимированные субтитры в MP4 из озвучки
- переделать автосубтитры в брендированный стиль с подсветкой слова
- разместить текст в безопасной зоне 9:16, не задев интерфейс платформы
- выгрузить SRT/VTT из тех же токенов для доступности

## Примеры запросов агенту
- добавь анимированные субтитры к этому вертикальному видео
- сделай караоке-субтитры из транскрипта Whisper и подсвети активное слово
- вжги субтитры в видео и заодно выгрузи SRT

## Похожие
- [remotion-captions](https://affpapa.org/nevibecode/skills/remotion-dev-remotion-captions.md) — скилл · 211800 установок
- [scenario-caption-studio](https://affpapa.org/nevibecode/skills/scenario-caption-studio.md) — скилл · 369 установок
- [reel-editor](https://affpapa.org/nevibecode/skills/reel-editor.md) — скилл · 554 установки
- [explainer-video](https://affpapa.org/nevibecode/skills/explainer-video.md) — скилл · 1500 установок
- [remotion-video-toolkit](https://affpapa.org/nevibecode/skills/remotion-video-toolkit.md) — скилл · 779 установок
- [audiogram](https://affpapa.org/nevibecode/skills/audiogram.md) — скилл · 673 установки

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

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

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