video-motionfx

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

Это «генератор клипов из кода». Когда сцена не про живых людей, а про числа, абстракцию, графики или показ продукта в 3D — гонять Veo бессмысленно и дорого. Тут пишется композиция на React/Remotion, рендерится за 10-30 секунд, кладётся в clips/ и регистрируется в той же БД, что и Veo-клипы. Director использует абсолютно одинаково.

motionfx vs clipgen (Veo)

Два подхода: Preset или Freestyle

26 Remocn-компонентов по категориям

Data Visualization

Scene Effects

Text Effects (для text-driven клипов)

Scene Transitions (между сценами внутри клипа)

Element Animation

Backgrounds & Post-Processing

3D Showcase (ThreeCanvas)

Получение качественных 3D-моделей

Image-to-3D сервисы (best способ под клиентский продукт)

Workflow в одном куске

1. Понять запрос — данные, концепт, mood, duration, контекст в ролике
2. Выбрать подход — Preset (готовый компонент) или Freestyle (с нуля)
3. Создать .tsx композицию в <project>/remotion/src/custom/<Name>.tsx
4. Зарегать в Root.tsx (<Composition> с правильными durationInFrames, fps, width, height)
5. Рендер через npx remotion render
6. Зарегистрировать в БД (общая director.db через video-clipgen/scripts/db.py)
7. Открыть для review

Команды

# Render (preset/freestyle)
cd ~/video-projects/apparatus/remotion
npx remotion render MyClip ../clips/motionfx_001.mp4

# С пропсами
npx remotion render MyClip ../clips/motionfx_001.mp4 \
  --props='{"title":"Apparatus","data":[...]}'

# 3D рендер — ОБЯЗАТЕЛЬНО эти флаги
npx remotion render ImplantShowcase ../clips/3d_showcase.mp4 \
  --gl=angle --concurrency=1 \
  --props='{"modelFile":"model.glb","title":"Straumann BLT"}'

# Регистрация в БД (общая с clipgen)
python ~/.claude/skills/video-clipgen/scripts/db.py update-clip \
  ~/video-projects/apparatus 42 \
  --description "Анимированный график сравнения цен — 4 столбца, основной бренд выделен зелёным" \
  --scene-type product --mood luxury \
  --tags "stats,chart,comparison,price,remotion"

# 3D модели в БД
python ~/.claude/skills/video-director/scripts/db.py add-model \
  ~/video-projects/apparatus /path/to/model.glb \
  --model-type implant --description "Straumann BLT implant" --source meshy

Скрипты

Color schemes по mood'у

Layout для 9:16 (1080×1920)

• Title zone: top 15-25% (absolute top ~18%)
• Content zone: 25-70% (графики, карточки, основной контент)
• Subtitle/label zone: bottom 20-28%
• Safe zone для 4:5 crop: важный контент держать между 25%-75% по высоте

Animation timing — рекомендуемые значения

Motion blur — когда оборачивать

import { CameraMotionBlur } from "@remotion/motion-blur";

<CameraMotionBlur samples={10} shutterAngle={180}>
  {/* fast-moving animated content */}
</CameraMotionBlur>

Использовать для: быстрые wipes, quick transitions, агрессивные hook-анимации.

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

Component locations в проекте

<project-dir>/remotion/src/
├── components/
│   ├── remocn/           # 26 Remocn компонентов (shadcn registry)
│   └── rve/              # React Video Editor effects (copy-paste)
├── custom/               # Project-specific композиции
├── templates/            # Стандартные шаблоны (TextoverAd, etc.)
└── lib/
    ├── brand.ts          # Brand colors/fonts (из project.yaml)
    ├── animations.ts     # Animation library
    ├── presets.ts        # TextoverAd presets
    └── remocn-effects.ts # RemocnText adapter

3D models в БД

Таблица models_3d (schema v5+):

Code quality — remotion-best-practices

Gotchas и tips

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

Brand-config читается из project.yaml → remotion.brand — тот же source, что и у video-remotion. Инфраструктура (remotion/ в проекте, npm install, Root.tsx) тоже общая — инициализируется один раз через init_project.py из remotion-скилла, дальше motionfx добавляет свои композиции в src/custom/.