Remotion — фреймворк, який перетворює React-код на реальне відео
Ще кілька років тому “зробити відео кодом” звучало як дивакуватий експеримент для ентузіастів. Тепер це щомісяця роблять мільйони разів: пакунок remotion завантажують понад 5 мільйонів разів на місяць з npm, у репозиторія на GitHub — 54 тисячі зірок, а серед клієнтів компанії Remotion AG — GitHub, Musixmatch, Wistia і SoundCloud. І щойно стався черговий поворот: Remotion випустила офіційний набір Agent Skills — інструкцій, які вчать ШІ-агентів на кшталт Claude Code чи Cursor писати робочий Remotion-код з першої спроби, а не вигадувати API, якого не існує.
Якщо коротко: Remotion — це не відеоредактор і не шаблонізатор.
Це React-фреймворк, де ви пишете звичайні компоненти, а Remotion рендерить їх кадр за кадром у справжній MP4-файл. Хочете анімований банер, підсумок року зі статистикою, відео-обкладинку для подкасту чи автоматизовану лінійку роликів для сотень користувачів — усе це пишеться як React-компонент, а не клацається мишкою в таймлайні. Саме тому Remotion так добре лягає на роботу з ШІ-агентами: код можна згенерувати, а не намалювати.
Що таке Agent Skills і навіщо Remotion зробила власний набір для ШІ
Agent Skills — це відносно новий формат: невеликі файли-інструкції (за суттю markdown з прикладами коду та жорсткими правилами), які коднг-агент підвантажує в контекст перед тим, як почати писати код у конкретній технології. Формат просувають одразу кілька гравців — Vercel зі своїм реєстром skills.sh і CLI-командою npx skills, а підтримують його Claude Code, Cursor, Codex, Kimi Code, Windsurf і GitHub Copilot. Ідея проста: замість того щоб агент вигадував API Remotion “з голови” (а він любить це робити, і в результаті отримуєте нерендерабельний код), він спершу читає файл із перевіреними правилами саме цієї бібліотеки.
Remotion — один з небагатьох проєктів, що зробили це офіційно й серйозно, а не як побічний файл у README. Компанія веде окремий репозиторій remotion-dev/skills із набором скілів, і за даними реєстру skills.sh на момент написання статті вони встановлені вже понад 317 тисяч разів. Це не маленька експериментальна фіча — це вже один з найпопулярніших офіційних наборів скілів у всій екосистемі ШІ-агентів для розробки.
Чіткі правила тут — не просто зручність. Ми вже писали, як моделі, яким дали занадто багато автономії без чітких меж, можуть діяти непередбачувано — наприклад, коли агенти OpenAI самі зламали Hugging Face, шукаючи найкоротший шлях до мети. Remotion-скіли — це протилежний підхід: замість сподіватись, що агент сам вгадає, як правильно, йому одразу дають вичерпні рамки.
Як встановити скіли Remotion для Claude Code, Cursor чи інших агентів
Встановлення — одна команда в терміналі проєкту:
npx skills add remotion-dev/skillsКоманда працює через реєстр skills.sh від Vercel і сама визначає, для якого агента ви її запускаєте (Claude Code, Cursor, Codex тощо), розкладаючи файли скілів у потрібне для цього агента місце — окремі агенти шукають інструкції в різних папках проєкту, і саме це вирішує команда, а не ви вручну.
Є ще простіший шлях, якщо ви тільки починаєте проєкт: скіли пропонують встановити прямо під час створення нового Remotion-проєкту командою npx create-video@latest (або bun create video для тих, хто на Bun) — досить відповісти “так” на запитання про AI-скіли, і вони одразу стають частиною проєкту.
Одинадцять скілів під капотом: що вміє кожен
Це не один суцільний файл на всі випадки життя, а модульний набір: агент підвантажує тільки той скіл, що стосується поточної задачі, а не тягне всі правила одразу в контекст.
/remotion-best-practices — базовий, “парасольковий” скіл. Якщо агент не знає, який саме скіл підійде під задачу, він починає з цього — тут описані загальні правила проєкту: як створити композицію, як анімувати, як рендерити.
/remotion-create — створення нового проєкту чи нової композиції з нуля, за конкретним запитом на кшталт “зроби анімовану стовпчикову діаграму з п’ятьма стовпцями”.
/remotion-markup — саме серце практичних знань: композиції, анімації, розкладка елементів, типографіка, робота з медіа, ефекти, звук, шрифти, таймінг. Це той скіл, який агент читає найчастіше під час написання звичайного відео.
/remotion-maps — окрема ніша: анімовані карти, маршрути й маркери, географічні пояснювальні відео. Підтримує Mapbox, MapLibre, MapTiler, GeoJSON і навіть 3D-обльоти місцевості через CesiumJS.
/remotion-render — власне запуск рендеру відео чи окремого кадру-стоп-кадру в готовий файл.
/remotion-captions — робота із субтитрами й підписами: як їх синхронізувати з таймлайном, а не просто накласти текстом поверх.
/remotion-saas — якщо ви не просто хочете одне відео, а плануєте побудувати на Remotion продукт (сервіс, що генерує відео для користувачів), цей скіл дає архітектурні поради під такий сценарій.
/remotion-interactivity — робить елементи композиції клікабельними й редагованими прямо в Remotion Studio (локальному візуальному редакторі поверх коду), а не тільки в самому коді.
/remotion-docs — практично вбудований пошук: агент може шукати документацію Remotion і одразу отримувати актуальну сторінку у форматі markdown, замість покладатись на застарілі знання зі свого навчання.
/remotion-upgrade — оновлює саму бібліотеку Remotion, суміжні пакунки (включно з Mediabunny — про неї нижче) і встановлені скіли до останніх версій.
/mediabunny — окремий скіл під бібліотеку Mediabunny: отримання метаданих відео й аудіо (тривалість, розміри кадру) прямо в браузері, без важких серверних інструментів.
Головне правило Remotion-скілів: чому CSS-анімації там під забороною
Ось де скіли рятують від найпоширенішої помилки. Базовий скіл /remotion-best-practices прямо забороняє агенту використовувати CSS transition, CSS animation і навіть анімаційні класи Tailwind — з поясненням, що вони “не відрендеряться коректно”. Причина не примха, а сама механіка Remotion: на відміну від браузера, де анімація йде в реальному часі, Remotion рендерить відео кадр за кадром, як стоп-кадри, і кожен кадр має бути обчислюваний детерміновано — тобто повністю передбачувано за номером кадру, без прив’язки до “скільки часу минуло насправді”. CSS-анімація, яка триває секунду в реальному часі браузера, під час покадрового рендеру просто не встигає (або встигає неправильно) — і кадри виходять або застиглими, або зі стрибками.
Замість цього скіл наказує агенту анімувати через хук useCurrentFrame() (він повертає номер поточного кадру) у зв’язці з функцією interpolate(), яка плавно переводить значення з одного діапазону кадрів в інший, і Easing для налаштування кривої прискорення-сповільнення. По суті, це той самий принцип, що й у ключових кадрах у відеоредакторі, тільки записаний кодом:
import { useCurrentFrame, Easing, interpolate } from "remotion";
export const FadeIn = () => {
const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 60], [0, 1], {
extrapolateRight: "clamp",
easing: Easing.bezier(0.16, 1, 0.3, 1),
});
return <div style={{ opacity }}>Привіт!</div>;
};Для таймінгу різних елементів на спільній шкалі скіл вчить агента використовувати компонент <Sequence> — грубо кажучи, обгортку, яка каже “цей блок з’являється з такого кадру і триває стільки кадрів”, замість ручного підрахунку затримок у стилях. А сама тривалість, роздільна здатність і частота кадрів композиції задаються окремо, у файлі src/Root.tsx, і можуть бути навіть динамічними — наприклад, розраховуватись за реальними даними з якогось API вже під час рендеру.
Скільки це коштує і кому потрібна платна ліцензія
Сам Remotion (бібліотека й скіли до неї) безкоштовний для одинаків і невеликих команд, а платні тарифи прив’язані до розміру команди чи сценарію використання:
| Тариф | Кому підходить | Ціна |
|---|---|---|
| Free License | Індивідуальні розробники й команди до 3 людей, комерційне використання дозволене | Безкоштовно |
| Company License | Команди від 4 людей | Оплата за фактичне використання |
| Remotion for Creators | Одиночна творчість і прототипування | $25/міс за місце |
| Remotion for Automators | Продукти на масовій автогенерації відео | $0,01 за рендер, мінімум $100/міс |
| Enterprise | Великі команди, потрібна пріоритетна підтримка | від $500/міс |
Для більшості людей, які просто хочуть спробувати зробити одне-два відео чи прототип — усе вкладається у безкоштовний план, і жодної картки платити не треба.
Практичні поради, якщо хочете спробувати Remotion-скіли вже сьогодні
- Не пишіть Remotion-компоненти в агенті без встановленого скіла. Без нього агент із високою ймовірністю вигадає CSS-анімацію чи неіснуючий пропс — і ви втратите час на дебаг замість корисної роботи. Одна команда
npx skills add remotion-dev/skillsперед першим промптом рятує від більшості типових помилок. - Формулюйте перший запит як конкретне технічне завдання, а не загальну ідею. “Зроби анімовану стовпчикову діаграму з п’ятьма стовпцями, кожен виїжджає знизу з затримкою 5 кадрів” працює набагато краще за “зроби круте відео зі статистикою” — агент зі скілом уже знає, якими інструментами це реалізувати, йому просто треба точну постановку задачі.
- Перевіряйте не весь рендер, а один кадр. Команда
npx remotion still [id-композиції] --frame=30рендерить лише один стоп-кадр — за секунду ви побачите, чи правильні кольори, розкладка й таймінг, без очікування повного рендеру відео на кожну дрібну правку. - Якщо працюєте з мапами, звуком, субтитрами чи 3D — просіть агента підвантажити відповідний окремий скіл, а не покладайтесь лише на базовий. Ці ніші (наприклад, анімовані маршрути на мапах чи синхронізовані субтитри) мають власні нетривіальні правила, яких немає в загальному
/remotion-best-practices. - Якщо ви не пишете код і не встановлюєте нічого локально — у Cowork є свій вбудований скіл на основі Remotion,
remotion-motion-graphics. Можна просто попросити зробити коротке відео чи анімацію прямо в чаті — без термінала, без npm, без встановлення агентних скілів вручну. - Для комерційного використання перевірте розмір команди заздалегідь. Безкоштовний план діє тільки для команд до трьох людей — якщо плануєте масштабувати продукт на Remotion, краще одразу зважити вартість Company License чи тарифів для автоматизації, ніж рахувати ліцензію в останній момент.
Remotion-скіли — гарний приклад того, куди рухається розробка з ШІ-агентами загалом: не просто “попросити модель написати код”, а дати їй перевірені, вузькоспеціалізовані інструкції під конкретну технологію. Той самий принцип, до речі, лежить в основі того, як сучасні агентні моделі годинами самостійно доводять до пуття складні інженерні задачі — про це ми докладно писали у огляді Kimi K3, де модель самостійно написала компілятор для GPU з нуля. Скіли Remotion — той самий підхід у мініатюрі, тільки заточений під одну конкретну бібліотеку.
