Две недели код вместо After Effects. Двадцать восемь коммитов, два готовых видео - одно образовательное про обход блокировок, второе на 50 секунд для /last30days skill.
Remotion + Claude Code работают. Но это не волшебство. Вот как это выглядело на практике.
Зачем это вообще нужно было
Мне нужен был launch trailer для /last30days - skill, который делает глубокое исследование за последние 30 дней по куче источников. Нанять видеографа - дорого и долго. Учиться After Effects - не хочу, у меня уже есть своя кроличья нора. Remotion я краем глаза видел раньше, идея делать видео как React-компоненты была понятна концептуально.
Инструмент версионируемый. Видео - это код, который лежит в git. Можно итерировать, откатываться, параметризовать. Это хорошо сочетается с тем, как я работаю с Claude Code вообще.
Решил попробовать.
Что получилось: два видео за десять дней
Проект вышел в две части.
BypassTheoryVideo - образовательное видео про подходы к обходу блокировок, семь сцен. Там есть анимированные SVG-пути для иллюстрации “заблокированного маршрута”, щиты для РКН и Anthropic, бар сложности для пяти решений, walkthrough который сопоставляет проблемы с решениями. Минуты четыре хронометраж.
Last30DaysVideo - 50-секундный launch trailer. Пять сцен: floating icons с прыжковой анимацией, wipe transition, typewriter-эффект для /last30days, три карточки с spring bounce, фейковый terminal demo, CTA. Всё на тёмной теме - палитра в духе Kurzgesagt, teal с orange и purple акцентами.
Дизайн-система вся в одном файле styles.ts. Цвета, типографика, константы тайминга - всё shared между сценами. Это оказалось важным решением: когда меняешь что-то в одном месте, весь ролик держит консистентность.
Техстак и где болело
Remotion 4.0 на React 19, TypeScript. TransitionSeries для переходов между сценами. Fade transitions на 20 фреймов - примерно две трети секунды. Этого хватает, не перегружает.
Боль номер один: CSS transitions в Remotion не работают так, как ожидаешь. Remotion рендерит каждый фрейм статически, поэтому transition: opacity 0.3s - это ноль. Всё должно быть frame-driven через useCurrentFrame(). Это ключевой инсайт, который нужно принять с самого начала.
Для terminal simulation я в итоге написал кастомный компонент. Typewriter effect - это вычисление индекса символа из текущего фрейма, не анимация. Progress bar - это соотношение фрейма к общей длительности. Stats counter - интерполяция числа по диапазону фреймов. Готовых React-библиотек для terminal UI в Remotion почти нет: те что есть используют useState/useEffect, что несовместимо с детерминированным рендером.
Фоновые частицы - BgParticles - написаны с seeded PRNG. Remotion при рендере может запросить любой фрейм в любом порядке, поэтому рандом должен быть детерминирован. Шесть слоёв: gradient, nebula, orbs, stars, particles, grain. Именно seeded PRNG делает это правильным - иначе частицы “прыгают” при рендере.
Боль номер два: промптинг. Если написать Claude “добавь анимацию”, получишь CSS transitions. Если написать “добавь spring-анимацию с damping 200 и initial velocity 10, начало на фрейме 15, длительность 30 фреймов”, получишь что надо. Специфичность промпта напрямую определяет качество вывода. Это не особенность Claude - это особенность любой работы с генеративными инструментами для UI.
Workflow: параллельные subagents для сцен
Каждое видео разбивалось на сцены. Каждая сцена - отдельный subagent в параллельном git worktree. Subagents работают одновременно, не ждут друг друга.
Схема простая: spec → план → параллельный запуск subagents → интеграция сцен в главный файл видео.
Где это реально ускорило работу: параллельная разработка нескольких сцен. Пока один subagent рисует terminal simulation, другой делает floating icons, третий - CTA сцену. Без параллелизма это было бы последовательно.
Где появились задержки: интеграция. Сцены разрабатывались изолированно, потом нужно было сводить их в TransitionSeries и согласовывать тайминги. Несколько сцен пришлось переделывать - они были слишком длинными или короткими относительно общего хронометража. Это ожидаемая часть workflow, не сюрприз.
Кастомные правила для Claude лежат в .claude/rules/. Там стиль кода и Remotion best practices - что можно делать, что нельзя, какие паттерны использовать для анимаций. Это существенно уменьшает количество итераций: Claude не изобретает велосипед каждый раз.
Честное резюме: время и затраты
Десять дней, двадцать восемь коммитов. Работал не фулл-тайм - параллельно с другими проектами, так что реальных часов сложно посчитать. Но много.
Значительная часть времени ушла не на написание кода, а на понимание как промптить. Это не очевидно сразу. Первые запросы к Claude давали generic результаты, которые потом нужно было переписывать. Постепенно выработался язык: конкретные параметры spring-анимаций, конкретные имена компонентов, конкретные фреймы для начала и конца эффектов.
Ключевой инсайт такой: это очень хорошая связка, но нужно много времени, чтобы понять как правильно промптить и исправлять. Для быстрого ролика на TikTok “на отвали” - подойдёт. Для качественной работы нужно вложиться в начале. Но потом следующие ролики идут сильно проще и быстрее.
Почему проще: у тебя уже есть design system, готовые компоненты, примеры промптов, кастомные правила для Claude, понимание паттернов. Первый ролик - это инвестиция в инфраструктуру. Второй ролик (Last30DaysVideo) вышел быстрее именно поэтому.
Что сэкономил: не платил видеографу, не учился After Effects, не зависел от чужого расписания. Видео версионируется в git, можно итерировать когда хочу.
Когда рекомендовать, когда нет
Подходит, если:
- Ты готов потратить время на первый ролик как на вложение в инфраструктуру
- Тебе нужна версионируемость и контроль над внешним видом
- Ты хочешь переиспользовать компоненты в следующих видео
- У тебя React/TypeScript в стеке - тогда это естественная среда
Не подходит, если:
- Нужен результат за пару часов
- Хочешь сложные 3D-эффекты или кинематографические спецэффекты
- Не готов разбираться с frame-driven анимацией
Remotion официально поддерживает Claude Code - есть template, есть skills для агентов, есть llms.txt. Это не хак, это documented path. Но документация не заменяет опыт понимания, что именно просить.
Я буду делать следующие ролики по той же схеме. Инфраструктура есть, паттерны понятны. Следующий ролик будет дешевле по времени, чем первый. Это и была цель.