Видео как код: шаблон в Remotion, который пересобирается из данных

Шаблон: три сцены и файл с данными

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

video-template/
├── src/
│   ├── index.ts          # entry point
│   ├── Root.tsx          # registers "Report" + the data schema
│   ├── Video.tsx         # plays the 3 scenes in a <Series>
│   ├── limits.ts         # all the rules in one place
│   └── scenes/
│       ├── TitleScene.tsx
│       ├── ChartScene.tsx
│       └── EndScene.tsx
├── data/
│   ├── example.json      # default props
│   ├── stress.json       # the worst case
│   └── week-42.json      # a new version = a new file
└── public/
    └── music.mp3

{
  "title": "Online store: week 42",
  "subtitle": "Sales, Oct 13-19",
  "chart": [
    { "label": "Mon", "value": 120 },
    { "label": "Tue", "value": 95 },
    { "label": "Wed", "value": 140 },
    { "label": "Thu", "value": 160 }
  ],
  "highlight": "+18% vs last week",
  "cta": "Full report in the channel"
}

export const LIMITS = {
  titleMaxChars: 48,
  titleMaxLines: 2,
  titleFontMax: 120,   // px
  titleFontMin: 64,    // px, never smaller
  chartMaxBars: 7,
  scenes: { title: 3, chart: 5, end: 3 }, // seconds
  musicVolume: 0.35,
};

Промпты для Claude Code

Запускайте по очереди в пустой папке, с Claude Code в терминале. После каждого шага открывайте превью и смотрите, прежде чем идти дальше.

npx skills add remotion-dev/skills

Claude Code может назвать файлы немного иначе или предложить структуру лучше. Это нормально. Главное, чтобы тексты и цифры оставались в файле с данными, а ограничения в одном месте.

Настройте шаблон, иначе заголовок вылезет за экран

Шаблон экономит время, только если новые данные его не ломают. Четыре вещи, которые нужно настроить один раз, прежде чем доверять ему настоящий ролик.

Новая версия из новых данных

Когда шаблон настроен, новый ролик это новый файл с данными и одна команда.

1. 01

   Скопируйте файл данных

   Сделайте копию data/example.json, переименуйте (например, week-42.json) и поменяйте значения.

2. 02

   Проверьте в превью

   Откройте студию, вставьте новые значения в панель props справа и прокрутите ролик целиком. Именно здесь ловится слишком длинный заголовок.

   terminal

   npx remotion studio

3. 03

   Соберите видео

   Передайте файл с данными в команду рендера. В Windows используйте файл, а не JSON прямо в команде: оболочка съедает кавычки.

   terminal

   npx remotion render src/index.ts Report out/week-42.mp4 --props=data/week-42.json

4. 04

   Много сразу

   Папка с файлами данных превращается в папку с роликами коротким циклом. Или попросите Claude Code: «добавь npm-скрипт, который рендерит каждый файл из data/ в out/».

   bash

   for f in data/*.json; do
     npx remotion render src/index.ts Report "out/$(basename "$f" .json).mp4" --props="$f"
   done

Когда шаблон видео стоит своих усилий

Собрать и настроить шаблон займёт вечер. Он окупается там, где формат повторяется, а меняется только содержание.