Skill #7 · Motion graphics engine

video-remotion

Motion graphics через Remotion (React-based programmatic video). Рендерит pixel-perfect анимированные intro-карточки, CTA-end-карды, кинетическую типографику, data-чарты, logo reveal'ы и lower-third оверлеи. Результат регистрируется как обычный клип — director берёт в монтаж.

Путь

~/.claude/skills/video-remotion/

Триггеры

remotion, motion graphics, анимация, создай интро, kinetic text, cta animation, lower third, data chart animation, animated intro

Зависит от

Node.js 18+, npm, react, remotion, @remotion/cli, @remotion/google-fonts, @remotion/motion-blur, brand-config из project.yaml

Пэйрится с

motionfx (расширенные эффекты), director (использует результат), remotion-best-practices skill

Что делает простыми словами

Это «дизайнер моушн-графики на коде». Вместо After Effects или Premiere — пишешь React-компонент, который рендерится в видео-файл. Полностью детерминистично, бесплатно, быстро (10-30 сек на клип), результат пиксель-в-пиксель воспроизводимый.

Используется когда нужны вещи, которые невозможно или странно снимать камерой / генерировать в Veo:

Intro-карточки — заставка с лого, названием продукта в начале ролика
CTA end-карды — финальный экран с призывом к действию и кнопкой
Кинетическая типография — текст хука с анимацией (для hook-сцены без съёмки)
Data charts — анимированные графики, счётчики, прогресс-кольца
Logo reveal — анимация логотипа
Lower thirds — оверлей с именем/должностью эксперта (на talking head)

Результат — обычный клип. Рендерится .mp4, копируется в clips/ проекта, регистрируется в director.db с source='remotion'. Дальше director использует его по clip_id наравне с любым другим клипом из library.

Два режима работы

Режим	Что внутри	Когда
Template Mode (80% кейсов)	Готовый шаблон + JSON-пропсы + render. Код писать не надо.	Запрос ложится на один из 8 готовых шаблонов
Custom Mode	Пишешь новую `.tsx`-композицию, регистрируешь, рендеришь	Креативный запрос не лезет в шаблоны, или нужна комбинация эффектов

Шаблоны (Templates)

Template	Scene type	Длительность	Главные props
IntroCard	hook	2-4 сек	`title`*, `subtitle`, `logoPath`, `animationStyle` (fade/slide/scale/typewriter)
CtaCard	cta	3-5 сек	`headline`*, `subline`, `buttonText`, `logoPath`, `animationStyle` (pulse/bounce/glow/slide), `urgency` (boolean — pulse)
LowerThird	testimonial (overlay)	3-6 сек	`name`, `title`, `position` (bottom-left/bottom-center), `style` (minimal/bar/bracket/pill)
KineticText	hook	5-15 сек	`phrases`* (string[]), `style` (bold-center/cascade/typewriter/explode), `timing` (fast/normal/dramatic)
LogoReveal	hook или cta	2-3 сек	`logoPath`*, `revealStyle` (fade/zoom/glitch/wipe), `tagline`
DataChart	product	4-8 сек	`chartType` (bar/counter/comparison/progress), `data`, `title`, `unit`
TextOnMedia	hook / product	4-8 сек	Текстовый оверлей поверх видео/изображения подложки
TextoverAd 15 presets	hook	15 сек	10 classic + 5 Remocn-effect пресетов, crop-safe zones, strikethrough support

TextoverAd — главный гость в textover-режиме Director. Когда director работает в textover-формате (молчаливый ролик с типографикой вместо голоса) — он использует TextoverAd для самого текстового слоя. 15 пресетов покрывают разные эстетики, crop-safe гарантирует читаемость на любых соцсетях.

Команды

Инициализация проекта (один раз)

python ~/.claude/skills/video-remotion/scripts/init_project.py \
  ~/video-projects/apparatus \
  --brand-colors '{"primary":"#1E90FF","accent":"#FFD700","bg":"#FFFFFF","text":"#1A1A2E"}' \
  --font "Montserrat" \
  --logo /path/to/logo.png

# Создаёт /remotion/ со всеми шаблонами, brand-config и npm-зависимостями
# 30-60 секунд (на npm install) — но только первый раз

Список доступных шаблонов

python ~/.claude/skills/video-remotion/scripts/templates.py list \
  ~/video-projects/apparatus

Детали шаблона (props, example)

python ~/.claude/skills/video-remotion/scripts/templates.py info \
  ~/video-projects/apparatus IntroCard

Рендер композиции (без регистрации)

python ~/.claude/skills/video-remotion/scripts/render.py \
  --project-dir ~/video-projects/apparatus \
  --composition IntroCard \
  --props '{"title":"Apparatus","subtitle":"Импланты Straumann","animationStyle":"scale"}' \
  --duration 3

Рендер + регистрация в clip library

python ~/.claude/skills/video-remotion/scripts/render.py \
  --project-dir ~/video-projects/apparatus \
  --composition IntroCard \
  --props '{"title":"Apparatus"}' \
  --duration 3 \
  --register-clip \
  --scene-type hook \
  --mood luxury \
  --description "Animated brand intro with logo"

Custom композиция

# 1. Регистрируем кастомный TSX-код
python ~/.claude/skills/video-remotion/scripts/templates.py add-custom \
  ~/video-projects/apparatus MyAnimation \
  --code ''

# 2. Рендерим
python ~/.claude/skills/video-remotion/scripts/render.py \
  --project-dir ~/video-projects/apparatus \
  --composition MyAnimation \
  --props '{"text":"Custom text here"}' \
  --duration 4

Скрипты

Файл	Что делает
`scripts/init_project.py`	Один раз на проект — создаёт `<project>/remotion/` с шаблонами, копирует `remotion_template/`, патчит `src/lib/brand.ts` из `project.yaml → remotion.brand`, запускает npm install. Читает бриф из БД для `BRAND.name`
`scripts/templates.py`	Управление шаблонами: `list`, `info` (детали props), `add-custom` (зарегать новую композицию)
`scripts/render.py`	Главный воркхорс — вызывает `npx remotion render` для указанной композиции с пропсами, опционально регистрирует в БД через `--register-clip`

Brand-система

init_project.py читает бриф из director.db и генерит src/lib/brand.ts с:

BRAND.name — название бизнеса из брифа
BRAND.primaryColor, BRAND.accentColor — из --brand-colors
BRAND.fontFamily — из --font

Все шаблоны автоматически используют BRAND-константы. Поменял цвета один раз — обновились все шаблоны проекта.

Brand-config лежит в project.yaml → remotion.brand. Это single source of truth. Никаких хардкодов цветов или шрифтов прямо в TSX — всегда через BRAND.

Output форматы

Формат	Флаг	Когда
H.264 .mp4	default	Клипы для Director, standalone видео
WebM with alpha	`--transparent`	Overlay-элементы (LowerThird, lower-third поверх talking head)
ProRes	`--codec prores`	Высококачественные мастера для дальнейшей обработки

Remotion API quick reference

API	Что делает
`useCurrentFrame()`	Текущий номер кадра (0-based)
`useVideoConfig()`	`{ fps, durationInFrames, width, height }`
`spring({ frame, fps, config })`	Physics-based анимация (0 → 1) — самый частый способ анимировать scale/opacity
`interpolate(value, inputRange, outputRange)`	Маппит значение между диапазонами (линейно или с easing)
`<AbsoluteFill>`	Full-screen positioned контейнер
`<Sequence from={frame}>`	Тайминговый child-компонент — показывается с определённого фрейма
`<Img src={staticFile("...")} />`	Картинка из `public/`
`staticFile("logo.png")`	Путь к файлу в `public/` директории

Code quality — remotion-best-practices

MANDATORY: перед написанием/правкой ЛЮБОГО Remotion-кода загружай только релевантные правила из ~/.claude/skills/remotion-best-practices/rules/. НЕ грузи все 39 файлов сразу — выбирай по задаче.

Задача	Какие правила грузить
Новый шаблон	`compositions.md` + `parameters.md`
Анимация	`animations.md` + `timing.md`
Анимация текста	`text-animations.md` + `fonts.md`
Видео/картинки на фоне	`videos.md` + `assets.md`
Переходы между сценами	`transitions.md` + `sequencing.md`
Аудио / voiceover	`audio.md` + `voiceover.md`
Графики	`charts.md`
Субтитры	`subtitles.md` + `display-captions.md`
3D / Lottie	`3d.md` / `lottie.md`
Transparent overlay	`transparent-videos.md`
FFmpeg операции	`ffmpeg.md` + `trimming.md`

Интеграция с Director

Remotion-клипы становятся обычными клипами в library:

Рендеришь с --register-clip → клип появляется в БД с source='remotion'
Director включает в montage по clip_id
IntroCard клипы: position 0 (opening shot), scene_type='hook'
CtaCard клипы: последняя позиция, scene_type='cta'
DataChart клипы: середина, scene_type='product'

Интеграция с Orchestrator

В пайплайне Remotion обычно бежит как опциональный pre-production шаг:

REMOTION (optional) → copywriter → voiceover → director (uses Remotion clips) → captions → reviewer

Сначала рендерим intro/CTA через Remotion → они уже лежат в clip library когда стартует основной конвейер. Director подхватывает их как обычные клипы.

Gotchas и tips

init_project.py запускать один раз на проект. На повторный запуск он перезатрёт src/lib/brand.ts — если ты руками настраивал кастомные стили, они потеряются. Хочешь сменить брендинг — правь project.yaml → remotion.brand и зови init заново сознательно.

Custom композиции — не забывай зарегать. Просто положить .tsx в src/custom/ недостаточно — Remotion не увидит. Регистрация добавляет <Composition> в Root.tsx с правильным id, durationInFrames, fps, width/height.

Transparent overlay (LowerThird) — рендерь с --transparent. Получишь WebM с alpha-каналом, который можно положить поверх talking head через FFmpeg overlay. Без флага получится чёрный фон вокруг бара.

Brand colors можно поменять без рендера заново. Поправил project.yaml → remotion.brand.primary → перезапустил init_project.py → все шаблоны автоматически подхватили новый цвет на следующем рендере. Полезно для A/B-тестов разных цветовых схем.

Когда брать motionfx вместо remotion. Если запрос про data viz / charts / 3D / abstract анимацию — это video-motionfx (там 26 Remocn-компонентов и расширенная палитра). Remotion = шаблоны intro/CTA/lower-third, motionfx = creative motion graphics.

🎬 Примеры работы

Открой Showcase → Remotion templates — там 5 реальных рендеров (IntroCard / CtaCard / LowerThird / KineticText / DataChart) собранные напрямую через npx remotion render. Все ~30-60s каждый, локально, $0.

Место в пайплайне

init_project (1x) → templates.py info → remotion render → clip in DB → director uses it

Remotion = опциональный pre-step. Без него Director работает на сырых Veo/upload клипах. С ним получаешь brand-консистентные intro/CTA, которые сильно поднимают premium-восприятие ролика.

Альтернатива поверх — creative-explainer-video для длинных narrated walkthroughs (2-5 минут) и creative-carousel для статичных каруселей через Remotion still.