Промо-ролик для Peorix: моушн-дизайн кодом у трьох форматах

Задача: Зробити короткий промо-ролик для Peorix, середовища розробки з ШІ-агентом. Показати продукт у дії у фірмовому стилі сайту, без старих скриншотів.

Що зроблено

• 32 секунди, 60 fps, три формати з однієї таймлайн: 16:9 для сайту та YouTube, 4:5 для стрічки, 9:16 для Reels і Shorts.
• Відкриття з першого екрана сайту: дизеринг-небо з місяцем, заголовок проявляється з-під плашок, вікно застосунку вирівнюється при прокрутці.
• Справжній інтерфейс, відтворений з вихідного коду: кроки агента, запит дозволу на команду, diff з кнопкою «Accept all», хмарна задача з pull request, вибір моделі, версії для macOS, Windows, Linux і браузера.
• Маскот Пео: ловить баги язиком, стрибає між вікнами, у фіналі сидить на лататі під місяцем.
• Монтаж на біт: зміни сцен і кліки стоять у долі такту, дроп музики припадає на «One subscription».
• Звук: музика і SFX з Mixkit, кожен звук прив'язаний до події в кадрі, гучність −16.5 LUFS.

Як зроблено Весь ролик написаний кодом: HTML, CSS і JavaScript, кожен кадр є функцією від часу. Покадровий рендер через Playwright, збірка відео в ffmpeg, звук зведений на Python.

Результат Три готові відео для сайту й соцмереж. Ролик можна перезібрати після будь-якої зміни інтерфейсу.

(особистий проект)