Уявіть, що замість генератора відео ви даєте штучному інтелекту велику шпаргалку з прийомами моушн-дизайну — і він сам вивчає ваш продукт, знімає кадри, підбирає звук та рендерить фінальний ролик. Саме так працює ShotCraft.
За два місяці репозиторій video-shotcraft зібрав 8622 зірки та 781 форк на GitHub, хоча всередині немає жодної нейромережі. Це не генератор відео у звичному сенсі: проєкт містить 157 текстових карток із детальними рецептами кінематографічних кадрів, 221 готову реалізацію на Remotion, 149 звукових ефектів та один повністю зібраний 36-секундний ролик-шаблон. Усе це оформлено як агентський скіл — репозиторій просто кладеться у папку скілів Claude Code або Codex, після чого агент сам читає рецепти, робить скриншоти продукту, пише React-компоненти для кожного кадру, розставляє звук і запускає рендер.
Автор проєкту — розробник під псевдонімом Vincentwei1021 (Wei Yihao). Код поширюється за ліцензією Apache 2.0, написаний на TypeScript, а останній коміт на момент публікації матеріалу датований 9 вересня 2026 року. Заголовний 38-секундний ролик галереї, за словами автора, повністю створений самим скілом: агент самостійно зробив розкадровку, реалізував кадри та додав звуковий дизайн за методикою з репозиторію.
Редакція Incrypted протестувала цей скіл і зробила сім вертикальних роликів формату 1080×1920 — на картках із бібліотеки та на реальних скриншотах incrypted.com. Головний висновок одразу: базовий сценарій справді працює так, як обіцяно, і видає 36-секундний ролик у роздільній здатності 1080p.
- Video-shotcraft — це не модель, а база знань для агента: 157 карток кадрів із чіткими параметрами анімації, 221 демо-компонент на Remotion, 214 прев'ю в онлайн-галереї, 149 звукових ефектів, 5 фонових треків і готовий шаблон ролика.
- Встановити можна трьома способами: попросити агента поставити скіл за посиланням, скористатися
npx skills add, або клонувати репозиторій і зробити символічне посилання в~/.claude/skills/. Клон важить 99 МБ. - Шаблон Ink Press — повноцінний робочий проєкт на Remotion: 1920×1080, 30 fps, 1085 кадрів, 10 сцен, звукові ефекти без музичного супроводу.
- Найцінніша частина — картки кадрів. У кожній є таблиця з конкретними значеннями параметрів і кривих, розділ «відомі ями» з історією виправлень і посилання на точну реалізацію в папці
demos/. - Моушн-воркбенч, доданий у вересні 2026 року, дозволяє розкласти готовий ролик по доріжках прямо в браузері та редагувати тексти, кольори й таймінг. Функціонально він працює, але на Windows потребує чотирьох ручних правок у коді репозиторію — без них падають встановлення залежностей, збірка, перевірка відповідності та експорт.
- Є прихована вартість: рушій Remotion безкоштовний для фізичних осіб і компаній до трьох співробітників включно, а бізнесу з чотирма і більше працівниками доведеться купувати ліцензію.
- Робочі документи скіла — файл SKILL.md, картки кадрів, опис пайплайну, інтерфейс воркбенча — написані китайською мовою. Двомовна лише онлайн-галерея.
Що це взагалі таке
Класичний відеогенератор отримує текстовий промпт і повертає готові пікселі. У ShotCraft логіка протилежна: жодного пікселя не генерує нейромережа, весь ролик — це детермінований React-код, який Remotion відмальовує покадрово в браузері й склеює у файл mp4. Роль штучного інтелекту тут — правильно написати цей код.
Складність у тому, що «правильно» в моушн-дизайні складається з десятків непомітних числових рішень: скільки кадрів тримати логотип після посадки, яку криву уповільнення застосувати при наїзді камери, за скільки кадрів до склейки давати спалах. Якщо агенту просто сказати «зроби красиво», він вигадує ці значення сам — і на виході, за визначенням автора репозиторію, виходить звичайне «слайд-шоу».
Саме цю прогалину закриває video-shotcraft. Кожна картка кадру — не опис ефекту, а покроковий протокол його налаштування. Ось приклад із картки brand-ink-open, яка відкриває шаблонний ролик.
В окремому розділі кожної картки — «відомі ями», написані як реальний розбір минулих правок: «паузу треба давати моменту посадки логотипа, а не звичайній текстовій картці — одного разу помилково додали звичайній картці й швидко відкотили». Складається враження, що бібліотека — це витяжка з реального продакшену, а не згенерований довідник.
Загалом таких карток 157, розподілених по десяти категоріях.
До кожної картки додається реалізація в папці demos/ — усього 221 TSX-файл. Агент не переказує вміст картки своїми словами, а зчитує її повністю та відкриває вихідний код із реальними коефіцієнтами.
Побачити ці прийоми в русі можна в онлайн-галереї — там 214 прев'ю з пошуком і фільтрами. Важливий нюанс: у самому репозиторії прев'ю відсутні. Вони зберігаються в GitHub-релізі й завантажуються окремим скриптом gallery/fetch-media.sh через gh release download, тому локальна копія галереї спершу відкривається порожньою.
Встановлення
Найшвидший спосіб — просто дати агенту посилання:
Install this skill for me: https://github.com/Vincentwei1021/video-shotcraft
npx skills add Vincentwei1021/video-shotcraft
ln -s "$(pwd)" ~/.codex/skills/video-shotcraft
У репозиторії також є файл .claude-plugin/plugin.json, тож скіл можна встановити і як плагін для Claude Code.
Окреме зауваження для Windows: команда ln -s у Git Bash створить символічне посилання лише за умови ввімкненого режиму розробника або запуску оболонки від імені адміністратора. Якщо цих прав немає, простіше створити junction — він їх не вимагає:
New-Item -ItemType Junction -Path "$env:USERPROFILE\.claude\skills\video-shotcraft" -Target "E:\путь\к\video-shotcraft"
Клонований репозиторій займає 99 МБ дискового простору — основну вагу дають текстури сторінок та аудіобібліотека.
Прогін шаблону Ink Press
Шаблон — це окремий самодостатній проєкт на Remotion у папці template/. Усі скриншоти, нарізки елементів і одинадцять використаних звукових файлів уже лежать у template/public/, тож для першого запуску нічого додатково завантажувати не потрібно.
cd video-shotcraft/template npm install npx remotion render src/index.ts AiflPromo out/promo.mp4
Встановлення залежностей — це 185 пакетів і близько чотирьох хвилин очікування. Перед першим рендером Remotion додатково докачує headless-браузер chrome-headless-shell вагою 113 МБ.
Спершу редакція зробила контрольний статичний кадр, як радить документація шаблону:
npx remotion still src/index.ts AiflPromo out/qa/f150.png --frame=150
На виході — кадр із крупним планом картки продукту, а сторінка показана в перспективі.
Повний рендер зайняв 40 секунд.
Структуру ролика докладно описано у файлі template/TEMPLATE.md у вигляді таблиці на десять сцен: чорнильна заставка з логотипом, загальний план дашборда, наїзд на головну картку, чотири текстові картки, роздача карток у сітку, набір тексту в пошуковому рядку, фільтрація, макроплан сторінки деталей, стос статей із лічильником, самописний звіт та фінальна збірка всіх елементів у кадрі з логотипом. Поверх накладено чотири спалахи-переходи, шість рядків субтитрів і таблицю з понад 30 звуків.
Як виглядає робота через агента
Якщо просто попросити агента «зроби ролик», скіл спершу проведе мінімальний аналіз продукту — прочитає сторінки, зрозуміє позиціонування та візуальну мову — і запропонує один із трьох режимів роботи:
- шаблон — взяти готовий Ink Press і замінити в ньому матеріал на власний;
- самостійна творчість — агент сам обирає візуальний напрям, кадри, розкадровку і звук та доводить проєкт до готового ролика без проміжних погоджень;
- спільна творчість — агент пропонує рішення, але чекає підтвердження на п'яти контрольних точках: бриф продукту, продуктові рішення, візуальний напрям, відповідність функцій кадрам і фінальна розкадровка.
Можна поставити і точкове завдання: «зніми цей кадр за карткою deck-deal-flyin» — тоді скіл одразу переходить до потрібної картки, минаючи пропозицію шаблону.
Для вільного режиму у файлі references/pipeline.md детально розписано пайплайн із восьми стадій: розуміння продукту, візуальний напрям і styleframe, відповідність функцій кадрам, розкадровка, фінальне збирання матеріалу, покадрова реалізація, звуковий дизайн, приймання. Останній етап відбувається за окремим чек-листом з одинадцяти критеріїв, зафіксованим у references/aesthetic-rules.md.
Одне з головних правил, зафіксоване у SKILL.md, варто процитувати окремо — саме воно пояснює, чому ролики не виглядають як набір абстрактних анімацій: реальні сторінки продукту дозволено показувати лише справжніми скриншотами. Малювати інтерфейс кодом можна тільки там, де нічого реального не відтворюється — наприклад, в абстрактній заставці чи брендовому блоці. Якщо результат не дотягує до типографської якості, скіл зобов'язаний повернутися до скриншотів.
Сім кадрів на власному матеріалі
Шаблон демонструє чужий продукт у чужому оформленні. Щоб перевірити бібліотеку саме там, де вона й повинна працювати, редакція зібрала сім вертикальних роликів 1080×1920 на матеріалі власного сайту — по одному кадру на кожну із семи категорій карток.
Перший крок — не відео, а дизайн-система. Скіл вимагає витягнути візуальну мову безпосередньо з продукту, і робиться це одним запитом до живої сторінки: із computed styles сайту отримали чорнильний #1D1D1F, приглушений #68696D, акцентний #EB5643, лінію #BDC0C7 та шрифтову родину Inter. Надалі всі титри, цифри, підкреслення й світіння в роликах використовують виключно ці значення.
Другий крок — збирання матеріалу за методикою скіла. Скрипт на puppeteer зняв три типи даних: повносторінковий скриншот у подвійному розділенні, десять вирізок карток новин із прозорим фоном та файл layout.json із координатами й текстами.
node capture.mjs # full page ok # cards found: 43 # cards captured: 10 # headlines: 20
У роликах використано прийоми typewriter-moves і marker-underline-title.
Обмеження
Обмеження інструмента мають дві різні природи, і їх варто розрізняти. Одні виникають через те, що скіл писався під конкретне середовище і конкретний ринок. Інші лежать поза межами репозиторію та усуваються лише грошима або заміною матеріалу. Жодне з них не скасовує загальний результат, але суттєво впливає на витрати часу.
- Робочі документи скіла написані китайською мовою: SKILL.md, усі 157 карток кадрів, опис пайплайну, документація шаблону, інтерфейс воркбенча та посібник до нього. Двомовними є лише README та онлайн-галерея — у ній є 157 англійських описів карток і стільки ж китайських. Для агента це не проблема, а от людині, яка хоче перевірити рішення агента за першоджерелом, доведеться складніше.
- Remotion, на якому побудований увесь проєкт, має власну ліцензійну політику: безкоштовний для фізичних осіб, некомерційних організацій і комерційних компаній до трьох співробітників включно. Компаніям від чотирьох людей потрібна платна ліцензія — тобто для редакції чи агентства це вже платний інструмент, хоча сам скіл поширюється під Apache 2.0.
- Демонстраційні матеріали шаблону показують інтерфейс вигаданого продукту з китайськими підписами. Перед публікацією їх треба повністю замінити, інакше в кадрі опиниться чужий інтерфейс.
- Прев'ю рухів не входять до самого репозиторію — вони зберігаються в GitHub-релізі й завантажуються через
gh. Локальна галерея відкриється порожньою, переглядати бібліотеку доведеться на сайті. - На Windows повноцінно працює лише базовий сценарій: клонування, встановлення, рендер шаблону через Remotion CLI. Воркбенч потребує чотирьох ручних правок у коді репозиторію, описаних вище. А нотатки README про запуск у headless-середовищі написані виключно для Linux.
Якщо скласти все докупи, вимальовується чіткий портрет ідеального користувача: розробник або команда на macOS чи Linux, які готові розбиратися в китайській документації і мають право на безкоштовну ліцензію Remotion. Усі інші заплатять за вхід — часом на правки під Windows, коштами на ліцензію або відмовою від частини заявлених можливостей, як-от експорту в редактор. Втім, жодне з обмежень не стосується головного: сама бібліотека рецептів працює скрізь, адже це текст із числами, а не виконуваний код.
Кому це стане в пригоді
Найочевидніший сценарій використання — продуктова команда, у якої є робочий вебінтерфейс, але немає бюджету на моушн-студію. Раніше вибір обмежувався або промо-роликом за кілька тисяч доларів, або шаблоном з відеоредактора, шаблонність якого одразу впадає в очі. Video-shotcraft пропонує третій варіант — ролик, зібраний за параметрами якісного чужого продакшену, ціною одного дня роботи з агентом.
Другий, менш очевидний і, можливо, навіть цінніший сценарій: картки кадрів можна вивчати окремо від усього іншого інструменту. Це методика, розкладена по числах, — чому логотип тримають у кадрі рівно секунду, чому зникнення відбувається швидше за появу, чому один прийом не можна використовувати як головний двічі за один ролик.
Дизайнеру ця бібліотека буде корисна навіть без жодного рядка коду.
FAQ
ShotCraft не є повністю безкоштовним онлайн-сервісом, що працює прямо в браузері — він встановлюється локально як скіл для Claude Code або Codex. Сам репозиторій відкритий за ліцензією Apache 2.0, тож увесь його вміст — 157 карток кадрів, 221 демо-компонент, 149 звукових ефектів і готовий шаблон ролика — доступний безкоштовно. Проте рушій Remotion, на якому все побудовано, безкоштовний лише для фізичних осіб, некомерційних організацій та компаній до трьох співробітників включно — від чотирьох людей потрібна платна ліцензія. Якщо потрібен саме онлайн-сервіс без встановлення, це вже інша категорія інструментів — добірки браузерних відеогенераторів варто шукати в окремих матеріалах Incrypted.
Саме на такий сценарій і розрахований ShotCraft: монтувати вручну не потрібно взагалі. Користувач встановлює скіл, дає агенту посилання на свій продукт і формулює завдання текстом, а далі агент сам читає сторінки, визначає позиціонування, робить скриншоти, збирає розкадровку, пише код для кожного кадру, розставляє звук і запускає рендер. Передбачено три режими: скористатися готовим шаблоном і замінити в ньому матеріал, повністю довіритися агенту, або погоджувати рішення на п'яти контрольних точках — від брифу продукту до фінальної розкадровки. Навички монтажу справді не є обов'язковими.
Усі подібні інструменти діляться на дві принципово різні групи. Перша — генеративні відеомоделі, які за текстовим описом малюють кадри з нуля; їхні огляди та порівняння зібрані в окремих матеріалах Incrypted. Друга — агентські інструменти на кшталт ShotCraft, які не генерують нейромережею жодного кадру, а збирають ролик кодом зі справжніх скриншотів вашого продукту. Для реклами продукту з робочим інтерфейсом друга група надійніша, бо в кадрі буде реальний інтерфейс, а не його приблизна реконструкція. А для абстрактних сюжетів, зйомок та художніх сцен, навпаки, більше підходять генеративні моделі.
На смартфоні ShotCraft не працює — це інструмент виключно для комп'ютера. Він встановлюється в папку скілів Claude Code або Codex, потребує Node.js і npm, а рендеринг здійснюється через Remotion, який докачує headless-браузер і покадрово відмальовує ролик локально. Для роботи зі смартфона варто шукати мобільні відеоредактори з функціями штучного інтелекту — це окрема категорія продуктів.
Різниця між підходами принципова. Класичний відеогенератор отримує текстовий промпт і повертає готові пікселі: кожен кадр малює нейромережа, тож інтерфейс вашого продукту вона відтворить лише приблизно. AI-агент у складі ShotCraft не генерує жодного пікселя — він пише React-код, який рушій Remotion покадрово відмальовує і склеює в mp4, а в кадрі опиняються справжні скриншоти вашого сайту. У документації скіла це закріплено окремим правилом: реальні сторінки продукту показуються лише скриншотами, а малювати інтерфейс кодом дозволено тільки там, де нічого реального не відтворюється. Друга принципова відмінність — джерело якості: агент не вигадує параметри анімації самостійно, а бере конкретні значення кадрів і кривих зі 157 карток, у кожній з яких є ще й розділ «відомі ями» з історією реальних виправлень.
