Как программно создавать ролики для TikTok и YouTube Shorts через Remotion

Remotion позволяет собирать вертикальные ролики программно: брать изображения, добавлять текст, анимации, переходы и движение фона, а затем в несколько команд получать готовый MP4. Ниже — последовательность действий, которую можно повторить на Windows с нуля.

1. Скачиваем и распаковываем готовый проект

Скачайте архив remotion-hello-video.zip по кнопке выше и распакуйте его в удобную папку на Windows.

Например, итоговый путь может выглядеть так:

C:\my_projects\remotion-hello-video

В архиве уже лежит готовая структура Remotion-проекта, поэтому отдельно создавать пустой проект командой create-video не нужно.

2. Устанавливаем Remotion и зависимости

Откройте PowerShell и перейдите в распакованную папку:

cd "C:\my_projects\remotion-hello-video"

Затем выполните:

npm.cmd install

Команда установит Remotion, React и остальные зависимости в локальную папку node_modules. Это нужно сделать только один раз.

3. Запускаем Remotion Studio

В той же папке выполните:

npm.cmd run dev

После запуска появится адрес:

http://localhost:3000

Окно PowerShell не закрывайте: в нём продолжает работать локальный сервер Remotion. Адрес можно открыть в браузере и сразу посмотреть композиции, перемещаться по таймлайну и проверять анимации.

Как снова запустить Remotion после перезагрузки компьютера

После перезагрузки компьютера устанавливать Remotion заново не нужно. Откройте PowerShell, перейдите в папку проекта и снова запустите локальный сервер:

cd "C:\my_projects\remotion-hello-video"
npm.cmd run dev

После запуска откройте в браузере адрес http://localhost:3000. Remotion Studio снова станет доступна, а все созданные композиции останутся на месте. Окно PowerShell нужно держать открытым, пока вы работаете с проектом.

4. Первый пример: две картинки и текст Hello World

Первый пример уже находится в распакованном архиве remotion-hello-video.zip. Рабочая папка проекта: C:\my_projects\remotion-hello-video.

После копирования структура будет выглядеть примерно так:

remotion-hello-video\
├─ public\
│  ├─ image-1.jpg
│  └─ image-2.jpg
├─ src\
│  ├─ index.ts
│  ├─ Root.tsx
│  └─ HelloVideo.tsx
├─ package.json
├─ tsconfig.json
└─ node_modules\

Свои изображения нужно положить сюда:

public\image-1.jpg
public\image-2.jpg

Названия файлов сохраняйте. Рекомендуемый размер для TikTok и YouTube Shorts — 1080 × 1920 пикселей.

Если Remotion Studio уже открыта, изменения появятся в браузере автоматически. В списке композиций выберите HelloVideo.

Чтобы получить готовый MP4, откройте второе окно PowerShell и выполните:

cd "C:\my_projects\remotion-hello-video"
npx.cmd remotion render HelloVideo out\hello-world.mp4

Готовый ролик появится здесь:

C:\my_projects\remotion-hello-video\out\hello-world.mp4

5. Второй пример: анимированные слова и движение фона

Распакуйте архив remotion-animated-text.zip. Из него перенесите в уже установленный проект только два файла:

src\AnimatedTextVideo.tsx
src\AnimatedWord.tsx

Положите их в папку:

C:\my_projects\remotion-hello-video\src

В результате в папке src будут находиться:

src\
├─ index.ts
├─ Root.tsx
├─ HelloVideo.tsx
├─ AnimatedTextVideo.tsx
└─ AnimatedWord.tsx

Теперь замените содержимое файла src\Root.tsx:

import {Composition} from 'remotion';
import {HelloVideo} from './HelloVideo';
import {AnimatedTextVideo} from './AnimatedTextVideo';

export const RemotionRoot = () => {
    return (
        <>
            <Composition
                id="HelloVideo"
                component={HelloVideo}
                durationInFrames={180}
                fps={30}
                width={1080}
                height={1920}
            />

            <Composition
                id="AnimatedTextVideo"
                component={AnimatedTextVideo}
                durationInFrames={210}
                fps={30}
                width={1080}
                height={1920}
            />
        </>
    );
};

После сохранения в Remotion Studio появятся сразу две композиции: HelloVideo и AnimatedTextVideo.

Во втором примере уже реализованы:

• появление слов по очереди;
• увеличение и пружинящий возврат размера;
• лёгкая пульсация текста;
• объёмная тень и свечение;
• плавное движение и масштабирование фоновых картинок;
• переход между двумя изображениями.

Для рендера второго ролика выполните:

cd "C:\my_projects\remotion-hello-video"
npx.cmd remotion render AnimatedTextVideo out\animated-text.mp4

Готовый файл появится здесь:

C:\my_projects\remotion-hello-video\out\animated-text.mp4

6. Как пользоваться проектом дальше

Повторно устанавливать Remotion не нужно. Для предпросмотра запускайте:

cd "C:\my_projects\remotion-hello-video"
npm.cmd run dev

Для рендера первого ролика:

npx.cmd remotion render HelloVideo out\hello-world.mp4

Для рендера второго ролика:

npx.cmd remotion render AnimatedTextVideo out\animated-text.mp4

В одном проекте можно создавать сколько угодно композиций и выбирать нужную по её идентификатору при рендере. Так можно подготовить шаблоны для новостей, игровых роликов, карточек товаров, цитат, субтитров и ежедневных автоматических публикаций!

7. Пример полноценного трейлера проекта

На той же основе можно собрать уже не учебный пример, а полноценный короткий трейлер: с несколькими сценами, движением камеры, крупными анимированными надписями, музыкой и отдельным финальным кадром.

Этот пример сделан в том же Remotion-проекте: изображения плавно перемещаются и меняют масштаб, текст появляется по словам, а вся композиция рендерится в обычный MP4. Такой подход подходит не только для учебных роликов, но и для реальных онлайн-проектов.