Скриншот приложения превращается в кинематографичный видеомокап без After Effects

Что показано

Дизайнер gilbertoprado.design прогнал через ultramock.io экраны своего концепта «Pulse», общего таск-трекера с онбордингом, персонализированным по имени («Olá, Gilberto»). Получился вертикальный ролик: телефон под углом, лёгкий проезд камеры со сцены на сцену, мягкое размытие по краям кадра. В кадр попал только финальный рендер, самого интерфейса сервиса и выбора шаблона в ролике нет. Судя по речи и подписи, это обычный отзыв: автор пишет, что оформил подписку сам, пометки о партнёрстве нет.

Почему это работает

Ultramock - это браузерная 3D-сцена (WebGL). Плоский скриншот ложится текстурой на объёмную модель телефона, сцену освещает студийный свет, а камера снимает её с настоящей глубиной резкости: в фокусе экран, края и корпус мягко уходят в боке. Это видно и на кадрах реела: у телефона виден торец, кнопки и порт. Остальное делает движение камеры. Вы не анимируете интерфейс, вы снимаете неподвижный предмет движущейся камерой, как в рекламе машины. Руками такой кадр собирают в After Effects или Blender слоями и ключами, здесь это упаковано в редактор с шаблонами.

Дорогой вид продающему видео даёт не анимация интерфейса, а реальная 3D-модель устройства, размытие по глубине и одно плавное движение камеры.

Как повторить

1. Открыть ultramock.io/editor (на главной это кнопка Open editor). Регистрация не нужна, сцена сохраняется в браузере.
2. Нажать Upload и загрузить скриншот экрана приложения, либо перетащить файл в окно или вставить из буфера. Сервис принимает и картинки, и видео, то есть запись экрана тоже. Берите скриншот в retina-разрешении: при наезде камеры мелкий скриншот рассыпается. Для сайта есть расширение Chrome (ссылка ниже): оно снимает вкладку 60 fps с автопрокруткой и отправляет прямо в редактор.
3. Выбрать сцену: в верхнем меню Templates лежат стартовые шаблоны, или соберите свою из устройства, камеры, фона и света. Часть шаблонов использует платные ассеты и на Free недоступна. Автор в подписи говорит про 6 готовых мокапов, но число шаблонов в каталоге я не проверил.
4. Открыть панель Auto-motion. Мышкой выделить на экране зону фокуса (кнопку, сайдбар, важный блок), затем нарисовать следующую зону, потом третью. Если загружено видео, между зонами сдвигайте плейхед на таймлайне на несколько секунд вперёд. Нажать compose: камера сама плавно пройдёт между зонами. Не понравилось, нажмите shuffle.
5. Если нужен один ролик из нескольких экранов, как у автора: каждый экран - отдельная сцена на таймлайне со своим устройством, камерой и размытием (в проекте до 60 сцен). Внутри сцены кнопка Add shot (клавиша K) запоминает текущее положение камеры как новый шот, а через Edit easing… правится характер движения: мягкий разгон и торможение читаются спокойнее и солиднее равномерного хода.
6. Нажать Export Video и выбрать Orientation, размер, Frame rate (30 или 60 fps) и Motion Blur. На Free доступно только горизонтальное 1280 × 720 при 30 fps с водяным знаком. Вертикаль 9:16 для сторис и рилсов, квадрат, 60 fps и чистый кадр открываются на Pro.

Проверочный прогон

Готовое видео должно выглядеть так, будто снято под углом на объектив с боке: края мягко расфокусированы, в резкости только сам экран, при движении камеры устройство слегка меняет ракурс. Если камера стоит на месте, вы не нарисовали зоны фокуса или не нажали compose. Если в кадре водяной знак Ultramock или ролик вышел горизонтальным 1280 × 720, вы экспортировали на Free.

Где это пригодится

Пригодится, если нужен презентационный ролик под приложение или сайт для питча, портфолио, сторис или лендинга, а под рукой нет моушен-дизайнера и часа в After Effects. Особенно когда экранов один-три и не нужна сложная режиссура: шаблон и одно движение камеры отработают быстрее монтажа руками. Для длинного ролика с озвучкой и сложным монтажом это не замена: таймлайн, текстовые слои и аудио-клипы в редакторе есть, но это редактор мокапов, а не монтажная. Шаги выше собраны по текстам интерфейса, официальному блогу и changelog сервиса, руками в редакторе я их не прогонял.

Оговорки

• Цена, которую называет автор, верна, но это годовой тариф. Официальная страница показывает Pro как «$8 / mo, $96 billed yearly», а помесячная оплата стоит $12 в месяц. Разовые $29.99 (lifetime) были акцией на запуске в Product Hunt, в текущем прайсе их нет. Отдельного тарифа Team на сайте нет.
• Бета-статус у видео-экспорта был на запуске весной 2026. Сейчас в прайсе и на главной пометкой BETA отмечен только доступ по MCP для ИИ-агентов (Pro), а видео с таймлайном и 60 fps описано в changelog как обычная функция. Формат и лимиты при этом меняются: за сентябрь сервис уже добавил новые сцены, устройства и лимит сцен в проекте.
• В кадрах реела виден только результат. Интерфейса сервиса там нет, поэтому шаги выше собраны по тексту редактора, официальному блогу и changelog, а не считаны с экрана. Как именно добавить следующую сцену на таймлайн, я в интерфейсе не проверял.
• Заявление про «6 готовых мокапов» только со слов автора, число шаблонов в каталоге не подтверждено. Часть шаблонов требует Pro.
• Что именно автор загрузил, скриншоты или запись экрана, из ролика не понять: сервис принимает и то и другое.
• На запуске у одного пользователя в Safari падал захват картинки, автор сервиса советовал Chrome. Расширение для захвата вкладки работает только в Chrome и браузерах на Chromium.

Ссылки и ресурсы

• Ultramock - https://www.ultramock.io/, редактор: https://www.ultramock.io/editor. Браузерный редактор мокапов и видео для приложений, сайтов и SaaS. Free: $0, без регистрации, 3 экспорта за 24 часа, водяной знак, видео только горизонтальное 1280 × 720 при 30 fps. Pro: $96 в год ($8 в месяц при годовой оплате) или $12 в месяц, вертикаль, квадрат, до 60 fps, без водяного знака, прозрачные экспорты, платные модели и сцены, сохранение проектов, MCP.
• Расширение Ultramock для Chrome - https://chromewebstore.google.com/detail/ultramock/ogcnlfgmgnjcbjhfhfhllhlgidocnaae, описание: https://www.ultramock.io/extension. Снимает вкладку как картинку или запись 60 fps с автопрокруткой и отправляет в редактор. Бесплатно, регистрация для захвата не нужна.
• Официальный разбор «From one screenshot to a launch video» - https://www.ultramock.io/blog/launch-video-from-one-screenshot. Как собрать ролик из одного экрана: одно движение камеры, настройка easing, план на десять секунд из трёх кадров, форматы 9:16, 1:1 и 16:9.
• Changelog Ultramock - https://www.ultramock.io/changelog. Что добавили в сентябре 2026: сцены, iPhone 18 Pro, слои текста, до 60 сцен в проекте.
• Ролик автора - https://www.instagram.com/reel/DcRWRmMq0Oi/, профиль gilbertoprado.design: https://www.instagram.com/gilbertoprado.design/. Бесплатно.
• Запуск в Product Hunt - https://www.producthunt.com/products/ultramock. Автор сервиса Josh Millgate, там же видны цены и статус видео на старте.
• В речи автор произносит ultramoc.io, это оговорка: такой домен не открывается. Верный адрес - ultramock.io.