Кинетика: ролик из текста или под озвучку

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

Бесплатный скилл для Claude. Кому подойдёт: видеомейкеру и блогеру, автору контента и SMM.

Скилл№ SK-0846Разработано в iiuniversitetClaudeНаш материалНужен терминалПроверено на безопасность

Скачать архивСкачать инструкцию (PDF)

Пример

Что получилосьРолик из шаблона скилла: слова влетают, бьют из глубины, камера летит

Пример сделан в скилле «Кинетика» в Claude Code. Нейросеть каждый раз рисует заново, поэтому ваш результат будет немного другим. Это 8 секунд из ролика на 14 секунд, который лежит в шаблоне скилла: python3 scenes.py и npx hyperframes render.

Что в архиве

Архив kinetika.zip, 1,4 МБ. Внутри папка kinetika-skill: 15 файлов.

Инструкция. Кинетика в Claude Code.pdf1,2 МБ
УСТАНОВКА.md2,0 КБ
kinetika/references/грабли.md3,1 КБ
kinetika/references/приёмы.md3,0 КБ
kinetika/SKILL.md10 КБ
kinetika/template/assets/fonts/FONTS.md490 Б
kinetika/template/assets/fonts/JetBrainsMono-cyrillic.woff28,7 КБ
kinetika/template/assets/fonts/JetBrainsMono-latin.woff231 КБ

Показать ещё 7 файлов

kinetika/template/assets/fonts/Montserrat-VariableFont_wght.ttf672 КБ
kinetika/template/assets/fonts/OFL.txt4,4 КБ
kinetika/template/assets/fonts/Oswald-VariableFont_wght.ttf165 КБ
kinetika/template/engine.py13 КБ
kinetika/template/runtime.js11 КБ
kinetika/template/scenes.py6,3 КБ
kinetika/template/style.css5,2 КБ

Как включить

Скачайте архив и распакуйте его.
Положите папку kinetika в ~/.claude/skills/.
Откройте Claude Code и опишите задачу своими словами: Claude подхватит скилл по описанию.

Первый раз подключаете скилл? Что такое скилл Claude и как его подключить.

О скилле

Что делает: Собирает ролик с кинетической типографикой: слова влетают и бьют из глубины, камера летит. Из текста или под ваш голос, на выходе MP4.
Когда брать: Нужен короткий анимированный ролик из текста (заставка, цитата, анонс, рилс) или ролик, где слова появляются точно в момент, когда их произносят. Формат 16:9 или 9:16.
Когда не брать: Нужны Claude Code, Node.js 18+, Python 3 и ffmpeg. Ролики с живой съёмкой и обычный монтаж скилл не делает. Под озвучку нужна разметка слов с таймкодами, без неё синхрона не будет.
Пример запроса: /kinetika Сделай 15-секундную киношную анимацию. Кинетическая типографика, 3D, плавная камера. Текст: «Ты пишешь одно сообщение. Claude собирает ролик. Буквы летят. Камера летит. Без After Effects.» Формат: вертикально 9:16 для Reels. Покажи раскадровку таблицей, потом собери и отрендери.
Нужно подключить: Claude Code (в приложении Claude на вкладке Code или в терминале), Node.js 18+ / Python 3 / ffmpeg, интернет при первом запуске: движок HyperFrames и браузер для отрисовки докачиваются сами

SKILL.md · текст скилла

Скопировать автоматически не получилось. Текст выделен: нажмите Ctrl+C (на Mac — ⌘C), на телефоне — «Скопировать» в меню выделения.

---
name: kinetika
description: >
  Кинетическая типографика и моушн-дизайн в Claude Code: собирает видеоролик из текста или под готовую
  озвучку. Слова влетают со смазом, бьют из глубины, тянутся, камера летит сквозь кадр, цифры
  набегают счётчиком, промт печатается в окне терминала, сцена меняется каждые 1–3 секунды строго
  под голос. Рендерит MP4 открытым движком HyperFrames (HTML + GSAP), 16:9 или 9:16. ВСЕГДА используй,
  когда просят: «сделай киношную анимацию», «кинетическая типографика», «моушн-дизайн», «анимированный
  текст», «ролик из текста», «анимация под озвучку», «буквы летят как в рилсе», «титры с движением»,
  «сделай 15-секундную анимацию», «смонтируй текстовый ролик под голос».
---

# Кинетика: ролик из текста или под озвучку

Скилл собирает ролик, где весь смысл несёт текст в движении. Ты пишешь сцены в одном файле
`scenes.py`, движок `engine.py` превращает их в страницу HyperFrames, HyperFrames рендерит MP4.
Каждое движение привязано ко времени слова: без озвучки время считается по тексту, с озвучкой —
по разметке слов.

## Что нужно на компьютере

- **Node.js 18+** (для `npx hyperframes`), **Python 3**, **ffmpeg** (нужен для озвучки и звука).
- HyperFrames ставить не нужно: `npx` скачает его при первом запуске, рендер сам скачает
  браузер Chrome для отрисовки кадров. Первый запуск дольше, дальше — быстро.

Проверка: `node -v`, `python3 --version`, `ffmpeg -version`. Чего-то нет — скажи человеку, что
поставить и как (macOS: `brew install node ffmpeg`; Windows: `winget install OpenJS.NodeJS
Gyan.FFmpeg Python.Python.3.12`), и подожди его согласия. Сам без спроса ничего не ставь.

## Порядок работы

**1. Вводные.** Не допрашивай: чего человек не сказал, бери по умолчанию и назови это одной строкой.

| Что | По умолчанию |
|---|---|
| текст или озвучка | текст из запроса; есть файл озвучки — режим «под голос» |
| длина без озвучки | 12–20 секунд (`pace` подгоняет темп) |
| формат | 16:9, 1920×1080; для Reels, Shorts, TikTok — 9:16, 1080×1920 |
| палитра | графит `#141418`, акцент `#F4CA1A`, светлый `#F3EEE3` |
| шрифты | Oswald Bold капсом — крупные слова, Montserrat — мелкие строки, JetBrains Mono — терминал (лежат в `template/assets/fonts`) |

**2. Проект.**

```bash
npx hyperframes init <имя-проекта> --non-interactive --example=blank
cp -R <папка этого скилла>/template/. <имя-проекта>/
```

**3. Тайминги.**

- Без озвучки: `setup(text="…")`. Время каждого слова считается по его длине, после точки пауза
  длиннее. `pace=1.2` — медленнее, `pace=0.85` — быстрее.
- Под озвучку: файл кладётся в `assets/`, разметка слов — рядом, `setup(voice="assets/voice.mp3",
  words="words.json")`. Движок сам читает форматы: список `{"word","start","end"}`, ответ синтеза
  речи с пословными таймкодами (HeyGen `word_timestamps`, ElevenLabs `alignment` по буквам),
  расшифровку с `segments[].words[]`. Разметки нет — получи её любой расшифровкой с таймкодами слов
  или синтезом голоса с таймкодами; без разметки под голос не собирай, синхрона не будет.

**4. Раскадровка до кода.** Вызови `show_words()` и разбей слова на сцены:

- одна мысль — одна сцена, 0,6–3 секунды; склейка за 0,05–0,1 с до первого слова сцены;
- фон чередуется: `dark` → `accent` → `light`, два одинаковых подряд — только намеренно;
- в сцене одно главное слово крупно (200–420 px), остальное мельче (50–150 px);
- у каждого ударного слова свой вход, один и тот же вход два раза подряд не ставь.

Покажи человеку раскадровку таблицей «сцена — слова — фон — главный приём» и собирай.

**5. Сцены в `scenes.py`.** Пример в шаблоне — семь сцен на 14 секунд, в нём есть все основные
приёмы. Сцена — `scene(id, начало, конец, фон, HTML, движения)`; время — только через `T(i)` /
`E(i)` (начало и конец слова i) и `cuts([...])` (границы сцен). Помощники движения (JS):

| Помощник | Что делает |
|---|---|
| `slam(sel, t, {s, blur, dur})` | удар из глубины с расфокусом |
| `streak(sel, t, {x, y, dur, peak})` | влёт сбоку со смазом по оси движения |
| `pop` / `pops([...], [...])` | слово выскакивает на своё время |
| `rise(sel, t)` | выезд строки из-под маски `.mask` |
| `stretchIn(sel, t, {sx})` | растянутое слово схлопывается в нормальную ширину |
| `shake(sel, t, amp, n)` | тряска кадра на ударе (на `#<сцена>-shk`) |
| `push(sel, t0, t1, a, b)` | медленный наезд камеры на всю сцену (на `#<сцена>-cam`) |
| `whip(sel, t, dist)` | сцена влетает хлыстом со смазом |
| `counter(sel, t0, t1, от, до, "mmss"\|"rub"\|"pct")` | счётчик: 00:00 → 04:00, 0 → 10 000 ₽, 0 → 100% |
| `typer(sel, parts, keys)` + `typer_keys([...])` | набор текста с подсветкой ключевых слов |
| `strike(sel, t)` | зачёркивание |
| `swapWords([...], [...])` | слова сменяют друг друга на одном месте |
| `wave(sel, n, t0, t1)` | звуковая волна по настоящей громкости озвучки |
| `glitchIn(main, copy1, copy2, t)` | глитч-вход двумя цветными копиями |
| `tremble(sel, t0, t1, amp)` | мелкая дрожь |
| `breathe(sel, t0, t1)` | «дыхание» кнопки в финале |

Готовые куски HTML из Python: `words_html`, `letters_html`, `starburst()`, `radial_lines()`, значки
`CHECK`, `ARROW`, `PLAY`. Классы: `.osw` `.mont` `.mono`, цвета `.ink` `.paper` `.acc` `.mu`,
раскладки `.center` `.left` `.row`, окно терминала `.term` `.tbar` `.tbody` `.tline` `.pr` `.caret`,
кнопка `.pill`, счётчик `.cntbox` `.uline`, зачёркивание `.sline` `.strike`, волна `.wave` `.bar`.

Звук по желанию: `sfx("assets/whoosh.wav", T(5, -0.1), 0.3)` — свист на влёте, удар на главном
слове; `music("assets/track.mp3", 0.2)` — подложка, если озвучки нет. Звуки бери с лицензией на
коммерческое использование (например, бесплатная библиотека Mixkit).

**6. Сборка и проверка.**

```bash
python3 scenes.py                 # пишет index.html и таблицу сцен
npx hyperframes lint              # 0 ошибок; предупреждения о длине файла не мешают
npx hyperframes snapshot . --at <моменты за 0,1 с до каждой склейки> --no-end --describe false
```

Посмотри снимки: главное слово каждой сцены целиком в кадре и резкое, ничего не наезжает,
надстрочные Й и Ё не цепляют строку выше. Править — в `scenes.py`, потом снова `python3 scenes.py`.

**7. Рендер.**

```bash
npx hyperframes render -o ролик.mp4 --fps 30 --quality high
```

15 секунд рендерятся меньше минуты, 70 секунд — около двух. Покажи человеку файл и три-четыре кадра.

**8. Правки словами.** «Быстрее» — `pace` меньше или короче входы; «другой цвет» — `palette`;
«поменяй слово» — текст в `setup` и в сцене; «вертикально» — `setup(width=1080, height=1920)`
и размеры шрифтов примерно на треть меньше.

## Перед сдачей

Прочитай `references/грабли.md` — там всё, на чём ролик ломается без ошибок в консоли.
Приёмы, которые делают кинетику дорогой, с числами — `references/приёмы.md`.

## Безопасность

Скилл ничего не скачивает и никуда не отправляет. Сеть нужна только движку: `npx` скачивает
HyperFrames (открытый проект HeyGen), рендер берёт браузер и библиотеку GSAP с jsDelivr. По умолчанию
HyperFrames шлёт обезличенную статистику рендера, это его поведение, не скилла.

Разработано в iiuniversitet — https://iiuniversitet.ru/?utm_source=bonus&utm_medium=skill&utm_campaign=katalog&utm_content=iiu-kinetika

Шапка SKILL.md: имя и описание, по которому нейросеть решает, когда включать скилл

---
name: kinetika
description: >
  Кинетическая типографика и моушн-дизайн в Claude Code: собирает видеоролик из текста или под готовую
  озвучку. Слова влетают со смазом, бьют из глубины, тянутся, камера летит сквозь кадр, цифры
  набегают счётчиком, промт печатается в окне терминала, сцена меняется каждые 1–3 секунды строго
  под голос. Рендерит MP4 открытым движком HyperFrames (HTML + GSAP), 16:9 или 9:16. ВСЕГДА используй,
  когда просят: «сделай киношную анимацию», «кинетическая типографика», «моушн-дизайн», «анимированный
  текст», «ролик из текста», «анимация под озвучку», «буквы летят как в рилсе», «титры с движением»,
  «сделай 15-секундную анимацию», «смонтируй текстовый ролик под голос».
---

Кинетика: ролик из текста или под озвучку

Скилл собирает ролик, где весь смысл несёт текст в движении. Ты пишешь сцены в одном файле scenes.py, движок engine.py превращает их в страницу HyperFrames, HyperFrames рендерит MP4. Каждое движение привязано ко времени слова: без озвучки время считается по тексту, с озвучкой — по разметке слов.

Что нужно на компьютере

Node.js 18+ (для npx hyperframes), Python 3, ffmpeg (нужен для озвучки и звука).
HyperFrames ставить не нужно: npx скачает его при первом запуске, рендер сам скачает браузер Chrome для отрисовки кадров. Первый запуск дольше, дальше — быстро.

Проверка: node -v, python3 --version, ffmpeg -version. Чего-то нет — скажи человеку, что поставить и как (macOS: brew install node ffmpeg; Windows: winget install OpenJS.NodeJS Gyan.FFmpeg Python.Python.3.12), и подожди его согласия. Сам без спроса ничего не ставь.

Порядок работы

1. Вводные. Не допрашивай: чего человек не сказал, бери по умолчанию и назови это одной строкой.

Что	По умолчанию
текст или озвучка	текст из запроса; есть файл озвучки — режим «под голос»
длина без озвучки	12–20 секунд (`pace` подгоняет темп)
формат	16:9, 1920×1080; для Reels, Shorts, TikTok — 9:16, 1080×1920
палитра	графит `#141418`, акцент `#F4CA1A`, светлый `#F3EEE3`
шрифты	Oswald Bold капсом — крупные слова, Montserrat — мелкие строки, JetBrains Mono — терминал (лежат в `template/assets/fonts`)

2. Проект.

npx hyperframes init <имя-проекта> --non-interactive --example=blank
cp -R <папка этого скилла>/template/. <имя-проекта>/

3. Тайминги.

Без озвучки: setup(text="…"). Время каждого слова считается по его длине, после точки пауза длиннее. pace=1.2 — медленнее, pace=0.85 — быстрее.
Под озвучку: файл кладётся в assets/, разметка слов — рядом, setup(voice="assets/voice.mp3", words="words.json"). Движок сам читает форматы: список {"word","start","end"}, ответ синтеза речи с пословными таймкодами (HeyGen word_timestamps, ElevenLabs alignment по буквам), расшифровку с segments[].words[]. Разметки нет — получи её любой расшифровкой с таймкодами слов или синтезом голоса с таймкодами; без разметки под голос не собирай, синхрона не будет.

4. Раскадровка до кода. Вызови show_words() и разбей слова на сцены:

одна мысль — одна сцена, 0,6–3 секунды; склейка за 0,05–0,1 с до первого слова сцены;
фон чередуется: dark → accent → light, два одинаковых подряд — только намеренно;
в сцене одно главное слово крупно (200–420 px), остальное мельче (50–150 px);
у каждого ударного слова свой вход, один и тот же вход два раза подряд не ставь.

Покажи человеку раскадровку таблицей «сцена — слова — фон — главный приём» и собирай.

**5. Сцены в scenes.py.** Пример в шаблоне — семь сцен на 14 секунд, в нём есть все основные приёмы. Сцена — scene(id, начало, конец, фон, HTML, движения); время — только через T(i) / E(i) (начало и конец слова i) и cuts([...]) (границы сцен). Помощники движения (JS):

Помощник	Что делает
`slam(sel, t, {s, blur, dur})`	удар из глубины с расфокусом
`streak(sel, t, {x, y, dur, peak})`	влёт сбоку со смазом по оси движения
`pop` / `pops([...], [...])`	слово выскакивает на своё время
`rise(sel, t)`	выезд строки из-под маски `.mask`
`stretchIn(sel, t, {sx})`	растянутое слово схлопывается в нормальную ширину
`shake(sel, t, amp, n)`	тряска кадра на ударе (на `#<сцена>-shk`)
`push(sel, t0, t1, a, b)`	медленный наезд камеры на всю сцену (на `#<сцена>-cam`)
`whip(sel, t, dist)`	сцена влетает хлыстом со смазом
`counter(sel, t0, t1, от, до, "mmss"\	"rub"\	"pct")`	счётчик: 00:00 → 04:00, 0 → 10 000 ₽, 0 → 100%
`typer(sel, parts, keys)` + `typer_keys([...])`	набор текста с подсветкой ключевых слов
`strike(sel, t)`	зачёркивание
`swapWords([...], [...])`	слова сменяют друг друга на одном месте
`wave(sel, n, t0, t1)`	звуковая волна по настоящей громкости озвучки
`glitchIn(main, copy1, copy2, t)`	глитч-вход двумя цветными копиями
`tremble(sel, t0, t1, amp)`	мелкая дрожь
`breathe(sel, t0, t1)`	«дыхание» кнопки в финале

Готовые куски HTML из Python: words_html, letters_html, starburst(), radial_lines(), значки CHECK, ARROW, PLAY. Классы: .osw .mont .mono, цвета .ink .paper .acc .mu, раскладки .center .left .row, окно терминала .term .tbar .tbody .tline .pr .caret, кнопка .pill, счётчик .cntbox .uline, зачёркивание .sline .strike, волна .wave .bar.

Звук по желанию: sfx("assets/whoosh.wav", T(5, -0.1), 0.3) — свист на влёте, удар на главном слове; music("assets/track.mp3", 0.2) — подложка, если озвучки нет. Звуки бери с лицензией на коммерческое использование (например, бесплатная библиотека Mixkit).

6. Сборка и проверка.

python3 scenes.py                 # пишет index.html и таблицу сцен
npx hyperframes lint              # 0 ошибок; предупреждения о длине файла не мешают
npx hyperframes snapshot . --at <моменты за 0,1 с до каждой склейки> --no-end --describe false

Посмотри снимки: главное слово каждой сцены целиком в кадре и резкое, ничего не наезжает, надстрочные Й и Ё не цепляют строку выше. Править — в scenes.py, потом снова python3 scenes.py.

7. Рендер.

npx hyperframes render -o ролик.mp4 --fps 30 --quality high

15 секунд рендерятся меньше минуты, 70 секунд — около двух. Покажи человеку файл и три-четыре кадра.

8. Правки словами. «Быстрее» — pace меньше или короче входы; «другой цвет» — palette; «поменяй слово» — текст в setup и в сцене; «вертикально» — setup(width=1080, height=1920) и размеры шрифтов примерно на треть меньше.

Перед сдачей

Прочитай references/грабли.md — там всё, на чём ролик ломается без ошибок в консоли. Приёмы, которые делают кинетику дорогой, с числами — references/приёмы.md.

Безопасность

Скилл ничего не скачивает и никуда не отправляет. Сеть нужна только движку: npx скачивает HyperFrames (открытый проект HeyGen), рендер берёт браузер и библиотеку GSAP с jsDelivr. По умолчанию HyperFrames шлёт обезличенную статистику рендера, это его поведение, не скилла.

Разработано в iiuniversitet — https://iiuniversitet.ru/?utm_source=bonus&utm_medium=skill&utm_campaign=katalog&utm_content=iiu-kinetika

Конец текста скилла

Автор: iiuniversitet. Раздаточный скилл iiuniversitet «kinetika».

Кинетика: ролик из текста или под озвучку

Пример

Что в архиве

Как включить

О скилле

SKILL.md · текст скилла

Кинетика: ролик из текста или под озвучку

Что нужно на компьютере

Порядок работы

Перед сдачей

Безопасность

Похожие