5 часов на 20-секундное демо: почему мы перестали записывать экран
Обычно "бюджетное" демо Telegram-ботов или диалогов в мессенджерах для соцсетей и рекламы делают так: берут телефон, открывают чат, запускают запись экрана, включают режим «Не беспокоить» (а иногда забывают), молятся, чтобы бот ответил вовремя, и начинают съёмку.
Проблемы начинаются на минуте записи:
- Прилетает входящий звонок или СМС от банка
- Всплывает пуш от другого приложения прямо поверх чата
- Опечатка в сообщении → начинаем сначала
- Бот подвисает в процессе работы → начинаем сначала
- Очень много настроек бота и обучающих сообщение - демка становится супер затянутой и не приходится расчитывать, что пользователь досмотрит до результата.
В итоге создание даже короткого, 30-секундного, демо превращается в несколько часов мучений, если действовать по такому сценарию.
Мы прошли через это десятки раз, пока не сделали инструмент, который собирает демо бота в готовое видео. Сейчас расскажу подробнее про наш кейс, после которого стало понятно, что надо подходить к этой задаче иначе.
Кейс: 5 часов на 20-секундное демо - и оно всё равно выглядит не очень
Задача: Нужен рекламный креатив - демо для существующего бота для соцсети. Формат 9:16, качество около-продуктовое. В голове была идея , что было бы неплохо иметь какую-то динамическую камеру - чтобы зум подсвечивал важные сообщения и удерживал внимание зрителя в течении всей демки.
Отсюла первичный план - следующий: делаем аккуратную запись экрана и возможно дополнительно добавим динамики через зум записи, имитирующий движение камеры, простенькую фоновую музыку и т.п. Естественно поскольку хочетя сэкономить на всем в в небольших проектах, а бюджет - пачка сухариков - допиливать всё это будем в бесплатном редакторе.
Попытка 1-3: Запись экрана на iPhone
- Дубль 1: входящий звонок на 8-й секунде
- Дубль 2: опечатка в слове «доставка»
- Дубль 3: пуш от Яндекс.Еды всплыл поверх чата
Попытка 4: Режим «Не беспокоить» + монтаж
- 40 минут на вырезание пауз и склейку кадров
- Результат: рывки при переходах, тайминги «печатания» то слишком быстрые, то слишком медленные - а хотелось бы контролировать каждую задержку
- Статус-бар с часами и батарейкой торчит в кадре - выглядит непрофессионально, а обрезать его без потери качества нереально
Попытка 1-3: Запись экрана на iPhone
- Дубль 1: входящий звонок на 8-й секунде
- Дубль 2: опечатка в слове «доставка»
- Дубль 3: пуш от Яндекс.Еды всплыл поверх чата
Попытка 4: Режим «Не беспокоить» + монтаж
- 40 минут на вырезание пауз и склейку кадров
- Результат: рывки при переходах, тайминги «печатания» то слишком быстрые, то слишком медленные - а хотелось бы контролировать каждую задержку
- Статус-бар с часами и батарейкой торчит в кадре - выглядит непрофессионально, а обрезать его без потери качества нереально
- Попытка добавить зум на важные сообщения в редакторе - ещё час работы, результат дёрганый и неестественный
Попытка 5: Закажем у агентства
- Запросили стоимость - от $250-300 за 30-секундный ролик
- Сроки - 5-7 рабочих дней с учётом правок
- Каждая итерация правок - ещё 2-3 дня ожидания
Итого: 5 часов работы своими руками, результат посредственный. Заказ у агентства - дорого и долго. И естественно, если завтра нужно сделать правки или новую версию много работы придётся переделывать с нуля.
Так пришли к идее автоматизировать сборку видео демок для мессенджеров
Сделали «Собери Демку» - инструмент, который собирает демо-видео мессенджеров как конструктор. Работает напрямую в браузере без установки.
Как это работает:
Вы создаёте "сценарий" диалога в веб-редакторе с окном live-превью - сразу видно результат. Никакого кода или скриптов - накликиваешь всё визуально в редакторе:
- Настраиваешь самый важный контент - кто участники диалога, какие сообщения, внешний вид интерфейса и т.п.
- Выбираешь формат - 1:1, 9:16, 4:5 (меняется одной кнопкой)
- Жмёшь "Собрать видео" → через 1-2 минуты получаешь готовый для публикации видео файл.
Чтобы добавить динамики и получить по настоящему "красивую" демку, есть возможность опционально настраивать
- Задержки, скорость печатания, паузы для каждого сообщения.
- Поведение камеры - статичная или динамическая с эффектами: плавные зумы, фокус на важных сообщениях, как в хороших продуктовых роликах.
- Переходы - эффекты переходов к лого бренда, QR-коду канала, ссылки на продукт для начала и конца демки
- Выбирать ambient звук на фон из предсобранного набора(как в примерах ниже) или загрузить свой.
Вся начинка мессенджера настраивается в несколько кликов: групповой чат, личная переписка или диалог с ботом. Можно имитировать любое поведение в рамках вашего сценария - сообщения от разных участников, прокрутка чата, добавление новых пользователей.
Ещё один понятный пользовательский сценарий: демо бота, который ещё только находится в разработке. Показать заказчику, как будет выглядеть готовый продукт - до того, как написана первая строчка кода. Идеально для прототипирования, согласования ТЗ или маркетинга до запуска.
Итого, возвращаясь к проблемам из кейса выше? Вот как они решаются:
- Визуал: статус-бара просто нет - в видео попадает чистый интерфейс мессенджера без часов, батарейки и уведомлений.
- Тайминги? Из коробки будут точными, если нужно имитировать дополнительную задержку или убрать в каких то местах можно "накликать" это поведение вручную.
- Красивая камера с зумом? Камера двигается плавно, а готовые шаблоны позволяет задавать поведения + нет артефактов от растяжения картинки.
- Нужен другой формат? Переключаешь 1:1, 9:16 или 4:5 одной кнопкой - не надо перезаписывать или пересобирать проект. И всё это видно в превью до сборки видео - не нужно ждать результат, чтобы понять, что что-то не так.
Где это НЕ сработает:
- Если нужно супераутентичное "техническое демка" или точное версия браузера
- Если демо должно показать баги или edge cases
- Если важен конкретный телефон или версия приложения
Какие мессенджеры поддерживаются
Сейчас полностью поддерживается Telegram:
- Все темы оформления - светлая, тёмная и все их варианты
- Мобильный и десктопный вид интерфейса
- Личные чаты, диалоги с ботами и групповые чаты
- Кастомные фоны чата
Конструктор демок для других мессенджеров: MAX и ещё один очень популярный, но официально запрещённый в РФ - в разработке. Update: вот-вот добавим последнее нашумевшее спорное обновление для визуала телеграма liquid glass.
Результат: с 5 часов до 15 минут, с "как-то так" до стабильного качества
До (скринкаст + монтаж или заказ у агентства):
- 3-5 часов своими руками или 5-7 дней ожидания от агентства
- 10-15 дублей в среднем при записи экрана
- $250-$300 за заказ у профессионалов
- Переделка при любом изменении - либо всё заново, либо ждать правки
- Один формат = одна запись или отдельный заказ
После («Собери Демку»):
- 15 минут на первое демо
- 2 минуты на каждый следующий формат
- Правки за секунды (поменял текст → собрал видео заново)
- 4 формата из одного диалога
- Стабильное качество - лучше, чем руками с монтажом
И самое приятное: тот же диалог в 9:16 и 1:1 для соцсетей делается буквально за минуту - меняешь формат, собираешь, скачиваешь.
Кто уже использует
Маркетинг-команды - контент для соцсетей без зависимости от дизайнеров. Нужно демо для Instagram Stories и VK? Один клик на формат - и готово.
Разработчики ботов - прототип, портфолио или демо для клиента. Согласовать видение, или сделать маркетинг.
Скоро запуск
Сейчас готовимся к запуску. Лучший способ увидеть какие результаты можно получить - посмотреть примеры на Собери Демку . Там же можно записаться в waitlist , чтобы не пропустить релиз можно там же.
P.S. А как вы делаете демо для телеграм ботов? Записываете экран или нашли способ лучше? Расскажите в комментариях - интересно послушать про ваш опыт.