Зачем шоурил
Портфолио со скриншотами показывает, что сделано, но не передаёт движение: как интерфейс оживает, как сцены сменяются в такт музыке. Этот ролик показывает, что я могу собрать динамичный моушн-дизайн с озвучкой и музыкой так же, как собираю сервисы и сайты: кодом и с помощью нейросетей.
Что в ролике
- Интро. Светящаяся линия, логотип собирается по буквам, вокруг по орбите летают инструменты: Claude Code, Codex, Telegram, MAX, Python. Кольца пульсируют всё быстрее и схлопываются во вспышку на дропе.
- Слова в такт. «Автоматизации», «Боты», «Сервисы», «Сайты» влетают ровно на каждое слово диктора, с цветной шторкой, иконкой и встряской.
- Стена проектов. Скриншоты реальных кейсов в 3D-перспективе и счётчик до 58 проектов.
- Боты. Телефон с настоящими сообщениями фермы ботов и каскад уведомлений на втором дропе.
- Сервисы. Растущие показатели, график загрузки, столбики продаж, тревога и её снятие на слове «предупреждают».
- Сайты. Окна браузера влетают в 3D и прокручиваются, курсор кликает.
- Финал. Фото, логотип, сайт и кнопка Telegram на финальном ударе.
Как сделано
Каждая сцена описана на HTML, CSS и JavaScript как функция от времени: по номеру кадра скрипт выставляет положение, масштаб, размытие и прозрачность каждого элемента. Playwright рендерит ролик покадрово в 30 кадров в секунду, а ffmpeg собирает кадры и звук в видео. Такой подход даёт точный контроль: смена сцен стоит ровно на долях трека, а надписи появляются на словах диктора.
- Музыка написана нейросетью Google Lyria под задачу: электроника 124 BPM с дропами. Доли и громкие места трека найдены анализом звука, и под них выставлен монтаж.
- Озвучка сделана голосом OpenAI gpt-audio по репликам, у каждой реплики измерены паузы между словами, чтобы привязать к ним анимацию.
- Сведение: музыка автоматически приглушается под голосом, громкость выровнена под соцсети.
- Вертикальная версия для Reels собрана из того же исходника с перестроенной раскладкой сцен.
Скриншоты
Частые вопросы
Можно ли сделать такой ролик для моего продукта или сервиса?
Да. Сцены собираются из ваших скриншотов, цифр и текстов, а музыка и озвучка генерируются под ролик.
Сколько форматов можно получить?
Любые из одного исходника: горизонтальный для сайта и YouTube, вертикальный для Reels, Shorts и сторис, квадратный для ленты.
Можно ли потом поправить текст или тайминг?
Да, сцены описаны кодом, поэтому правка текста, цвета или скорости пересобирается за минуты, без повторного монтажа.
