Загрузка 0
ПОДЕЛИТЬСЯ

Мой блог

Листай вниз

Как Claude Opus 5.5 помогает создавать видео с Remotion: подробный гид

Как Claude Opus 5.5 помогает создавать видео с Remotion: подробный гид

В предыдущей публикации я рассказывал о создании сложной 3D-анимации через GPT-6 Astra и Blender, которую многие сочли избыточной для простых задач. Сегодня я предлагаю рассмотреть совершенно иной подход к генерации роликов: я поручил Opus написание программного кода, управляющего сценами, графикой и движением. Мы разберем реальные примеры из практики и изучим рабочий процесс в связке с фреймворком Remotion.

Создание видео с помощью языковых моделей открывает новые горизонты для разработчиков и контент-мейкеров. Вместо ручного монтажа сложных последовательностей мы можем делегировать написание логики искусственному интеллекту.

Интерфейс проекта Remotion для редактирования и предпросмотра кода сцен
Окно предпросмотра проекта в фреймворке Remotion
Инструкция по настройке доступа к модели Claude Opus 5.5 через BetterToken
Параметры подключения и настройки модели через прокси-сервис

Три ярких примера проектов из X

Для начала давайте обратим внимание на три показательные работы зарубежных авторов, опубликованные в сети X. Во всех этих случаях задействованы современные веб-технологии вроде JavaScript, Three.js, Playwright и FFmpeg, а общая концепция сводится к тому, что языковая модель генерирует код, который впоследствии трансформируется в полноценную плавную анимацию.

Реклама

Девочка спрашивает Claude о его любимых вещах

Первый проект представляет собой трогательный рисованный короткометражный мультфильм, в котором маленькая девочка ведет диалог с искусственным интеллектом. Согласно описанию авторской подборки, нейросеть Opus 5.5 сгенерировала необходимый JavaScript-код для этой сцены.

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

Так из строк кода рождается миниатюрная графическая история в уникальной рисованной эстетике от автора @kevin_t_ngo.

От серверной к чипу Blackwell

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

Реклама

Как отмечается в материале, вся трехмерная сцена целиком помещается в один-единственный HTML-файл, а написанный нейросетью код на базе Three.js отрисовывает графику прямо в окне браузера.

Подобный прием смены масштабов эффективно связывает несколько абстрактных уровней в единое целое, превращая сугубо техническую демонстрацию в наглядную визуализацию современной вычислительной архитектуры от автора Lucian.

Короткий роликосервис инференса

Третий пример представляет собой 26-секундный динамичный проморолик, посвященный сервису инференса для выполнения запросов к моделям. Здесь скрипты на JavaScript управляют появлением текстовых блоков, графических плашек и переходов, в то время как инструменты Playwright и FFmpeg автоматизируют финальную сборку видеоряда.

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

Подобная подача идеально подходит для быстрого знакомства аудитории со сложными IT-продуктами, где объемную информацию нужно разложить на несколько простых визуальных акцентов, как это продемонстрировал @deedydas.

Что именно делает языковая модель в процессе

В рассмотренном сценарии искусственный интеллект берет на себя рутину по написанию, отладке и структурированию программного кода. Если я ставлю задачу вроде «создай три наглядных этапа взаимодействия с API», модель превращает ее в массив структурированных карточек с анимированным появлением.

В самом коде четко прописываются координаты элементов, цветовая палитра, хронометраж каждой сцены и математические правила переходов.

Как устроен рендеринг через Remotion

Популярный инструмент Remotion описывает видеоматериал при помощи привычных React-компонентов. В коде фиксируется положение текстовых блоков, тайминги появления карточек и траектории движения объектов.

Реклама

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

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

После завершения генерации остается лишь оценить удобочитаемость субтитров, общую динамику темпа и плавность переходов.

Как выглядит рабочий процесс на примере Remotion

Любая задача начинается с составления четкого технического задания. Мне нужно определить целевую аудиторию, хронометраж, а также требуемые сцены и текстовые формулировки. Чем детальнее составлен запрос, тем проще проверить адекватность полученного кода.

Трехмерная визуализация дата-центра и чипа Blackwell в браузере
Интерактивная трехмерная модель дата-центра в одном HTML-файле

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

Подготовка проекта и настройка композиции

Далее с помощью утилиты Claude Code я привлекаю модель к инициализации проекта и написанию логики сцен. Текстовое наполнение полезно хранить отдельно от визуального шаблона: это позволит в будущем легко локализовать ролик для другой языковой аудитории без переписывания всей анимации.

После первичной генерации проект запускается в режиме предварительного просмотра. На этом этапе я проверяю отсутствие визуальных артефактов, читаемость шрифтов и правильность компоновки кадров.

Все замечания можно передать ассистенту на естественном языке — например, попросить увеличить внутренние отступы или продлить показ конкретного слайда.

Финальный рендеринг и подключение к системе

Когда качество анимации меня полностью устраивает, Remotion запускает финальный экспорт и сохраняет готовый видеофайл в формате MP4. Весь рабочий цикл сводится к пяти простым шагам: формулировка ТЗ, получение кода, проверка превью, правки и сохранение.

Для интеграции с моделью я использую сервис BetterToken: настраиваю авторизацию в интерфейсе Claude Code и выбираю нужную версию claude-opus-5-5.

Готовые промпты для быстрого старта

Чтобы вам было проще повторить этот опыт, я подготовил собственную коллекцию запросов, адаптированных на русский язык по мотивам популярных видеороликов из сети X, и опубликовал их в репозитории Awesome Opus Video Prompts.

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

Презентация сервиса инференса с анимированными токенами и текстом
Проморолик IT-продукта с анимированной графикой и текстом

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

01.