Как превратить горизонтальный ролик Opus 5.5 в читаемую вертикальную версию

Удачная вертикальная версия меняет компоновку, а не только соотношение сторон. В проекте Opus 5.5/Remotion сохраните историю и исходные материалы, а затем разместите заголовок, скриншот и субтитры в новой вертикальной композиции. Кадрируйте реальный интерфейс вокруг той части, которая нужна зрителю; не сплющивайте десктопный кадр в рамку под экран телефона.

Это руководство переводит 30-секундный обзор продукта из 1280 × 720 в 720 × 1280. В него входят оба реальных экспорта и редактируемый проект. Новая работа здесь — кадрирование скриншотов, размещение текста и проверка результата; более широкий процесс от кода до MP4 описан в основном руководстве по видео с Opus.

Сравните два реальных экспорта

Посмотрите или скачайте горизонтальную версию с озвучкой, а затем сравните её с вертикальной:

Реальный рендер Remotion 720 × 1280, 30 fps, 900 видеокадров. Английская эталонная озвучка и субтитры по предложениям общие с горизонтальной версией. Это обзор публичных страниц, а не запись выполнения запроса к API.

Скачайте полный проект и вертикальный MP4. В архиве сохранены реальные исходные снимки 1280 × 720 и итоговые координаты кадрирования, так что преобразование можно изучить и изменить.

Мы действительно вызвали claude-opus-5-5 в официальном Claude Code от Anthropic, чтобы создать исходный код на React/Remotion. Этот вызов получил текстовые описания материалов и их размеры, а не пиксели скриншотов. Мы добавили реальные изображения, проверили результат, внесли редакторские исправления и отрендерили видео локально. Opus не выводил этот MP4 напрямую, а эталонный голос был сгенерирован отдельно с помощью eSpeak NG.

Выберите: перекомпоновка, кадрирование или новый снимок

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

Наша вертикальная версия сочетает перекомпоновку с подлинным кадрированием. Она не претендует на то, чтобы показывать мобильную вёрстку сайта. Снимок документации превращается в более крупный вид вводной части слева; снимок API сохраняет основной обзор и таблицу. Исходные снимки остаются без изменений.

Руководство по демо из скриншотов объясняет, как выбирались эти материалы. Если у вас есть реальный мобильный интерфейс, его снимок может оказаться лучшим решением, чем увеличение области десктопа. Это был бы другой исходный материал, поэтому отдельно запишите его URL, область просмотра и время снимка.

Одна история, две композиции

Установите Node.js и npm перед запуском проекта. Для необязательных проверок медиафайлов в терминале, описанных ниже, также нужна отдельная установка FFmpeg, включая ffprobe; npm ci эту консольную команду не устанавливает. Рендерить можно через готовые скрипты npm, не используя необязательные команды проверки.

Начните со скачанного проекта:

npm ci
npm start

Выберите DemoNarrated, затем DemoPortrait. Обе композиции используют одинаковые интервалы сцен, изображения и расписание озвучки. Отличается их проп компоновки (layout). Благодаря этому сравнение имеет смысл: разница в том, что может прочитать зритель, вызвана компоновкой и кадрированием, а не подменой сценария.

Оставьте беззвучную композицию DemoLandscape, если нужен экспорт только с изображением. Это третий результат в архиве, а не другая раскадровка.

В src/index.tsx SCENES задаёт склейки на 4, 11, 18 и 25 секундах. Root регистрирует размеры композиций. Demo выбирает компоновку, а ShotScene решает, где разместить каждое изображение. Если изменить только Root, большая часть реальной дизайнерской работы останется несделанной.

Задайте вертикальную компоновку в реальных пикселях

Наша вертикальная композиция отводит по горизонтали область от x=48 до x=672. Это оставляет по 48 пикселей с каждой стороны холста шириной 720 пикселей и даёт скриншоту ширину 624 пикселя. Основное содержимое начинается около y=110. Скриншот начинается на y=330, строка главы — на y=860, а блок субтитров занимает диапазон от y=936 до y=1060.

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

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

Заголовок может переноситься на две строки, не сдвигая скриншот в область субтитров. Это важно для «Find the documentation», который занимает больше места, чем «Explore the catalog». Для другого заголовка проверяйте реальную высоту с переносами, а не рассчитывайте, что одинаковый кегль гарантирует одинаковую высоту блока.

Кадр API — самое высокое изображение в этой версии. Его высота примерно 479,3 пикселя, поэтому он заканчивается около y=809,3. Подпись снимка начинается примерно на 22 пикселя ниже. До строки главы остаётся мало свободного места, поэтому не стоит мимоходом увеличивать высоту изображения или кегль подписи, не проверив эту сцену заново.

Рассчитайте кадрирование без искажения интерфейса

Для кадрирования нужны четыре координаты исходника: x, y, ширина и высота. Для масштабирования — один коэффициент для обеих осей. Итоговые кадрирования исходников:

Все кадрирования находятся в пределах исходных файлов 1280 × 720. Кадр каталога намеренно исключает расположенный ниже раздел с меняющимися ценами. Кадры документации и API сохраняют реальные пиксели; текст и элементы управления не воссоздаются.

Для ширины показа W и кадрирования (x, y, w, h) используйте:

масштаб = W / w
высота области просмотра = h × масштаб
ширина изображения = ширина исходника × масштаб
высота изображения = высота исходника × масштаб
смещение слева = -x × масштаб
смещение сверху = -y × масштаб

Для сцены API 624 / 690 ≈ 0.90435, а 530 × 0.90435 ≈ 479.3. Изображение сдвигается под областью просмотра с overflow: hidden на соответствующие отрицательные смещения. Ширина и высота по-прежнему используют один коэффициент, поэтому круги остаются круглыми, а текст не растягивается.

Есть практическое ограничение: увеличение фрагмента не восстановит детали, которых нет в исходном снимке. В нашем кадре документации 580 пикселей исходника показаны на 624 пикселях вывода. Это умеренное увеличение видно из расчёта; это не новый снимок страницы в более высоком разрешении. Если мелкий текст критичен для руководства, снимите нужную область в подходящем разрешении и снова проверьте её в размере экрана телефона.

Что изменилось после первого рендера

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

Мы также убрали из субтитров CSS-ограничение в две строки. Такое ограничение делает блок аккуратным, но может отбросить последние слова. Безопаснее, чтобы слишком длинный субтитр заметили при проверке и осознанно сократили, разбили или дали ему больше места. Английские предложения из примера помещаются в проверенную версию; при их замене нужна повторная проверка.

Наконец, субтитры теперь берутся из src/captions.json, который создаёт скрипт эталонного аудио, и после округления до кадров появляются в момент начала предложения или чуть раньше. Руководство по озвучке и субтитрам объясняет это расписание и намеренные паузы для чтения. В проекте используются субтитры по предложениям, а не пословное выравнивание в стиле караоке.

Не переносите все элементы горизонтального дизайна без изменений. В горизонтальной версии заголовки документации и API делят полосу под полным скриншотом. В вертикальной заголовок, скриншот, подпись снимка, строка главы и субтитры занимают отдельные позиции по вертикали. Это другая композиция с той же историей.

Попросите Opus о вертикальной адаптации, которую можно проверить

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

Добавь вертикальную композицию в этот существующий проект Remotion.
Сохрани горизонтальную композицию и утверждённые исходные материалы.
Цель: 720x1280, 30 fps, те же границы сцен и общее число кадров.

Расположи заголовок, скриншот и субтитры отдельными вертикальными блоками.
Используй эти кадрирования исходников: [x, y, width, height для каждого утверждённого изображения].
Сохраняй один коэффициент масштаба для ширины и высоты изображения.
Никогда не перерисовывай интерфейс и не меняй подписи внутри скриншотов.

Границы дизайна для этого проекта: x=48..672; важное содержимое y=90..1080.
Это отступы проекта, а не утверждение о безопасной зоне какой-либо платформы.
Используй отдельную полосу субтитров; никогда не скрывай переполнение через line-clamping.
Не выдумывай временные метки слов и не сокращай озвучку молча.

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

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

Проверьте все сцены, затем экспортируйте обе версии

Перемотайте на показательные кадры, например 150, 390 и 600, для сцен каталога, документации и API. Проверьте также вступление и финал: длинная финальная точка назначения может выйти за границы, даже если все сцены продукта в порядке.

С помощью селектора кадров в Remotion Studio посмотрите один и тот же момент в обеих композициях. Обращайте внимание на то, узнаётся ли реальная страница, виден ли весь текст субтитра, а также на края кадрирования, переносы заголовков и место вокруг подписи снимка. Проверьте начало и конец переходов, чтобы пружинная анимация (spring) или движение камеры не выталкивали содержимое за пределы отведённой области.

npm run render:narrated
npm run render:portrait
ffprobe -v error -show_entries stream=codec_name,width,height,r_frame_rate,nb_frames \
  -show_entries format=duration -of json out/portrait.mp4

Ожидаемый поток вертикального видео: H.264, 720 × 1280, 30 fps и 900 видеокадров. Звуковая дорожка AAC может иметь небольшой закодированный хвост за пределами 30-секундной визуальной шкалы. Сравнивайте реальный тайминг предложений, а не только округлённую длительность контейнера.

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

Сдайте редактируемую пару форматов

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

Страница модели Opus 5.5 относится к генерации и правке кода проекта. Наш зафиксированный вызов шёл через официальный Claude Code; локальный рендерер и эталонный синтезатор речи — отдельные инструменты. Этот пример не доказывает существование в Ofox вертикального редактора «в один клик».

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