Що таке Remotion і як зробити відео через Claude Code або Cursor: простий гайд

Що таке Remotion простими словами

Remotion — це інструмент для створення відео на комп’ютері. У звичайному редакторі ти пересуваєш кліпи мишкою. У Remotion розміщення тексту, рух і час появи елементів записані в коді. Потім Remotion показує результат у своєму вікні та зберігає ролик у відеофайл. Сайт Remotion не є кнопкою «зроби фільм»: для цього способу ти створюєш окремий проєкт на своєму ПК.

Наприклад, можна попросити: «Покажи назву гри, потім збільш ігровий скрін, а в кінці виведи посилання». ШІ-помічник напише потрібні файли, Remotion складе кадри, а ти переглянеш їх і попросиш виправити невдалі моменти. Готове відео не з’явиться само собою, якщо не надати сценарій, зображення чи звук, які хочеш у ньому бачити.

Хто за що відповідає і де це взяти

Для першої спроби потрібен комп’ютер, Remotion, Node.js і один ШІ-помічник для коду. Обери Cursor або Claude Code: ставити обидва не потрібно. Кожен пункт нижче веде на офіційну сторінку, а коротке пояснення каже, навіщо він тут.

• Remotion ↗

  Основа для відео. Збирає сцени з коду, показує попередній перегляд і експортує ролик. Окремий проєкт Remotion створимо командами нижче.

• Node.js ↗

  Програма, яка дозволяє комп’ютеру запускати інструменти Remotion. Встанови рекомендовану стабільну версію LTS. Разом із нею зазвичай з’являються команди npm і npx, які використаємо нижче.

• Cursor ↗

  Редактор файлів із вбудованим ШІ-агентом. У ньому відкриєш папку відео, напишеш завдання звичайними словами та переглянеш зміни. Після встановлення увійди або створи акаунт.

• Claude Code ↗

  Інша можливість замість Cursor: помічник, який працює з файлами проєкту. У застосунку Claude Desktop увійди до акаунта й відкрий вкладку Code. Безкоштовний чат Claude не включає Claude Code; потрібен тариф із доступом до нього. Є також версія для термінала.

• Remotion Agent Skills ↗

  Додаткові інструкції для ШІ-помічника про те, як правильно робити сцени в Remotion. Це не окремий відеоредактор і не платний генератор відео.

• Remotion Studio ↗

  Вікно попереднього перегляду твого проєкту. Воно відкривається у браузері на твоєму комп’ютері: тут дивишся ролик і запускаєш експорт.

Як із коду виходять рух і готовий файл

Відео складається з кадрів, тобто окремих картинок, які швидко змінюються. Якщо написати «назва з’являється за першу секунду», агент задасть це правило у файлах проєкту. Remotion покаже назву в потрібний момент. Рендер означає фінальне збирання всіх кадрів і звуку в один файл, наприклад MP4, який можна завантажити на YouTube.

Агент пише та виправляє код за твоїми словами. Ти дивишся чорновий ролик у Remotion Studio й кажеш, наприклад: «Текст замалий, збільш його» або «Цю сцену тримай на екрані ще дві секунди». Це добре працює для пояснень, графіків, титрів і роликів в одному стилі. Сценарій, смак і перевірка результату залишаються за тобою.

Перший запуск: шість простих кроків

Починай на комп’ютері, не на телефоні. Під «терміналом» нижче маємо на увазі вікно, у яке вставляють команди. На Windows це може бути PowerShell, а в Cursor є власна вкладка Terminal. Команди під списком скопіюй по одному рядку в зазначеному порядку; назва my-video стане назвою твоєї папки.

npx create-video@latest --yes --blank my-video
cd my-video
npx remotion skills add
npm run dev

Повна офіційна інструкція Remotion ↗

Що написати агенту для першого ролика

«Промпт» — це просто текст завдання для ШІ-помічника. Скопіюй приклад нижче в панель Agent або Code. Вертикальний розмір 1080×1920 означає формат екрана телефона; 30 кадрів/с означає 30 картинок за секунду. Для першої спроби достатньо 30 секунд, чотирьох сцен і титрів без озвучки.

Після першого результату напиши конкретно, що не подобається: «На 8-й секунді текст замалий» чи «Перехід між сценами надто швидкий». Коли все виглядає добре, експортуй MP4 у Studio. Якщо хочеш озвучку, додай у папку запис свого голосу й попроси агента вставити його. Автоматичний голос і розпізнавання мови потребують додаткового налаштування.

Промпт для Claude Code або Cursor

Зроби в цьому проєкті Remotion вертикальний ролик 1080×1920, 30 кадрів/с, тривалість 30 секунд. Тема: як вайбкодер за один вечір створює просту гру. Чотири сцени: гачок, завдання для агента, перший ігровий кадр, висновок. Використовуй лише кодові 2D-елементи, типографіку та локальні файли з проєкту. Не підключай платні API, не вигадуй статистику й не завантажуй чужі медіа без перевірки прав. Додай українські титри, плавні переходи та місце для моєї озвучки. Спочатку покажи план із таймінгом сцен, потім створи композицію, запусти прев’ю і перевір початок, середину та кінець. Рендер у MP4 роби після моєї перевірки.

Три приклади на YouTube

У цих відео видно екран автора і готовий результат. Зверни увагу, як з’являються написи, рухаються фігури і скільки разів автор просить агента щось виправити. Приклади короткі: вони не доводять, що десятихвилинний випуск створюється одним повідомленням.

• ▶Create motion graphics with AI – Simple tutorial for beginnersДивитися на YouTube ↗

  Короткий урок, на який посилається документація Remotion: від текстового завдання до рухомих написів і фігур.

• ▶Generate Animated Videos with Claude Code (Remotion Agent Skill Tutorial)Дивитися на YouTube ↗

  Snapper AI перетворює статичну інфографіку на анімований MP4. На 0:45 видно результат, далі проєкт, три запити, правки в прев’ю та експорт.

• ▶Claude Code + Remotion = FREE Motion Graphics Tutorial (No Subscription)Дивитися на YouTube ↗

  Pouya Eti показує титри, анімацію підписки, переходи й графіку для монтажу. Посилання веде до першого прев’ю на 4:07; частина з іншими прикладами починається на 7:29. Слова «без підписки» в назві відео залежать від лімітів конкретного акаунта.

А як щодо 3D та субтитрів?

Для першого ролика 3D не потрібне. 2D — це пласкі написи, картинки й фігури. 3D — об’єкти з глибиною, які можна повернути камерою. Якщо знадобиться 3D, Remotion має додатковий пакет @remotion/three, який працює з Three.js, інструментом для тривимірної графіки у браузері. Агент може зробити просту камеру, світло й рух об’єкта. Але складного героя з якісним ригом і анімацією це автоматично не замінить.

Субтитри можна просто написати в ролику вручну. Якщо є запис голосу, SRT або VTT — це файли, де текст прив’язаний до часу; Remotion може їх використати. Whisper — окрема програма для перетворення мовлення на текст, яку можна під’єднати додатково. На першій спробі не встановлюй її без потреби. Українські слова й час появи субтитрів усе одно перевіряй на слух.

• Remotion: як працює 3D ↗
• Remotion: як додати SRT/VTT ↗
• Remotion: усі способи зробити субтитри ↗

Чи реально зібрати 10-хвилинне відео?

Так, технічно це можливо: для десяти хвилин при 30 кадрах/с потрібно 18 000 кадрів. Але тривалість відео не дорівнює часу роботи. Потрібно написати сценарій, побудувати десятки сцен, дібрати матеріали, перевірити факти й звук, переглянути чорнові рендери та експортувати фінал. Довга 3D-сцена чи складні ефекти збільшують вимоги до комп’ютера й час рендеру. Remotion не обіцяє, що кожен такий ролик буде готовий за один запит.

Працює краще по частинах: спочатку 30 секунд у потрібному стилі, потім один завершений двохвилинний розділ, а вже після цього цілий випуск. Якщо стиль, темп і звук не витримують короткий тест, масштабування до десяти хвилин тільки примножить переробки. Для регулярної рубрики з однаковими титрами й графікою код, навпаки, дає перевагу: вдалий шаблон можна використовувати повторно.

«Лише токени»? Де виникають витрати

«Токени» тут означають обсяг тексту, який ШІ читає й пише під час роботи. Від нього можуть залежати ліміти або ціна агента. Remotion на твоєму ПК не бере плату за кожну секунду готового відео, але Cursor чи Claude Code можуть мати свої ліміти й тарифи. Комп’ютеру також потрібен час, щоб зібрати кадри; платні голоси, музика або чужі матеріали додають окремі витрати.

За поточними умовами Remotion окремий автор або компанія до трьох осіб може користуватися безкоштовною ліцензією, зокрема комерційно. Більшим командам потрібна платна ліцензія. Перед робочим проєктом перевір умови за офіційним посиланням нижче. Отже, «лише токени» — неточне спрощення.

• Умови ліцензії Remotion ↗
• Поточні тарифи Cursor ↗
• Поточні тарифи Claude ↗

Для кого це справді корисно

Це зручно для роликів із написами, графіками, рухомими схемами й однаковим оформленням у кожному випуску. Якщо змінилися текст або цифри, агент може виправити їх у проєкті й зібрати відео знову. Для реалістичного кіно з персонажами знадобляться також зйомка, 3D-анімація або інші інструменти.

Почни з короткого тесту на своєму ПК: чи подобається вигляд, скільки часу пішло на правки та скільки тривав експорт. Після цього вирішуй, чи робити десятихвилинний випуск. Якщо хочеш, щоб ШІ генерував самі кадри з героями, це інший процес: про нього є наш окремий гайд про мультфільм і кіно з ШІ.