Завдання
Платформа Restaurant Reviews знімає сотні навчальних роликів по своєму дашборду для власників ресторанів. Перед кожним потрібне інтро на 20-30 секунд: їжа, напої, анімований логотип, великий заголовок уроку, коротка музика. Головну вимогу замовник виніс окремо: заголовок має мінятися без пересборки анімації й без заміни музики, лишатися по центру і з 3, і з 10 словами, а новий ролик має виходити за хвилини. Ще просили пояснити, який софт знадобиться для правок, і не тягнути дорогі плагіни.
На момент розвідки в брифі було 174 роботи, 22 з них з оцінкою 5 зірок, а завантажити можна було тільки картинки та GIF. Майже всі конкуренти здали гарний GIF і все. Чи можна його справді правити, замовник перевірити не може.
Навіщо і яка ідея
Замовник купує не ролик, а систему, яку його співробітники правитимуть сотні разів. Тому продавати треба редагованість, і показувати її прямо в превʼю, а не обіцяти в описі. З 131 роботи з файлами зміну заголовка в самому превʼю показали 4, і жодна з 22 лідерів. Пʼятисекундну версію теж 4 зі 131 і жоден лідер.
Звідси ідея: маленький інструмент у браузері. Співробітник вписує назву уроку, тисне Export і отримує готовий MP4 на 22 або 5 секунд. Без Premiere, Canva і плагінів.
Перед стартом план розібрали з пʼяти різних позицій, від скептика до прагматика. Один з варіантів був Canva-шаблон на стокових кліпах, він обійшовся б у нуль кредитів. Не взяли: відео в нас робиться тільки через Higgsfield, а схема «свій код плюс згенеровані кліпи» вже спрацювала на брифі Horse Syndicate. Ще один висновок врахували: подавати закритою заявкою (Sealed), інакше ідею зі зміною заголовка скопіювали б за кілька годин.
Хід роботи
| Коли | Що відбувалося |
|---|---|
| День 1, 14:30 | Розвідка: 174 роботи, 22 на 5 зірок, завантажити можна тільки картинки і GIF. План розібрано з пʼяти позицій |
| День 1, 15:50 | Розбір конкурентів: 131 робота з файлами, 195 файлів. Усі 22 лідери це GIF, з 50 відхилених 38 статичні картинки. Зміну заголовка і версію на 5 с не показав жоден лідер |
| День 1 | Скачано 5 файлів замовника з брифу, серед них PSD логотипа. Помаранчевий #EC6623 знято з логотипа і передано в шаблон |
| День 1, 16:30 | Рушій шаблону готовий: справжній логотип, заголовок одним полем, версія 5 с, експорт MP4 у Chrome, рендер майстра. Їжа й музика поки заглушки |
| День 1, 17:00 | Музика в Suno, трек Tasty Treats, перші 23 с, гучність вирівняна до -16 LUFS. Прослухано, схвалено |
| День 2, 08:50 | 6 кліпів їжі й напоїв у Kling 3.0, 1080p, по 5 с, без звуку |
| День 2 | Покадрова перевірка кліпів. Капучино з латте-артом у брак, замість нього сьомий кліп, еспресо. Майстер перерендерено зі справжньою їжею |
| День 2, 09:55 | Заявка зібрана: GIF з інтро і трьома змінами заголовка поспіль, GIF версії на 5 с, PNG «що ви отримаєте», опис на 967 знаків із 1000 |
| День 2, 10:10 | Подано закритою заявкою, робота #205, позначено AI generated, Montserrat вказано як чужий елемент. Робіт у брифі на той момент 178 |
Чим робили
Шаблон: HTML, CSS і JavaScript, без збірки і сервера, відкривається в Chrome. Анімація малюється кодом, заголовок підганяється сам: переноситься на два рядки й бере найбільший розмір, при якому лишаються поля з боків. Колір бренду міняється одним рядком у styles.css, підписи до кліпів на початку app.js. Кліп або музику можна замінити, просто перезаписавши файл з тією ж назвою. До шаблону є інструкція на одну сторінку.
Експорт у замовника: запис прямо в Chrome у реальному часі, на виході MP4 (H.264 + AAC) 1920x1080. Файл називається за заголовком, наприклад RR_intro_adding-your-restaurant-menu_22s.mp4. Якщо відкрити сторінку з диска, а не з хостингу, перед першим експортом треба один раз вказати папку assets, кнопка Export про це нагадує.
Майстер-файли робляться окремо: Playwright відкриває сторінку в headless Chrome, малює кожен кадр окремо, ffmpeg збирає MP4 на 30 кадрів за секунду і GIF. Так кадри не залежать від швидкості компʼютера. Окремий скрипт перевіряє центрування і тестовий експорт.
Кліпи: Kling 3.0 через Higgsfield, 7 штук, 1080p, по 5 с. Музика: Suno, трек Tasty Treats, перші 23 с, -16 LUFS. Шрифт Montserrat 500-800 за ліцензією SIL OFL, файли лежать у шаблоні. Логотип узято з файлів замовника як є, без перефарбування.
Результат
Інтро 22 с, 1920x1080, 30 кадрів за секунду. 0-6 с: три кліпи їжі, стейк, піца, бургер, з повільним рухом камери і підписами із зірками. Близько 6 с помаранчева шторка в напої. 6-11 с: апероль, пиво з вином, еспресо. 11-15 с: відкривається помаранчеве коло, сідає логотип з відблиском. 15-20 с: біла картка з логотипом, заголовком уроку і підписом «Restaurant Owner Dashboard Tutorial». 20-22 с: усе йде у світлий кадр, музика стихає, щоб чисто склеїтися із записом екрана.
Версія на 5 секунд для коротких уроків: логотип на помаранчевому, картка із заголовком, той самий світлий фінал.
Перевірка: заголовки з 3, 6, 8 і 12 слів тримають центр у межах 2 px. Майстер рівно 22,000 с на 30 кадрів за секунду. Експорт прямо в браузері в тесті дав 26,95 кадру за секунду, тому майстри робляться покадровим рендером, а замовнику лишається простий експорт в один клік. Стейк узято другою половиною кліпу, після перевороту, де видно смуги від гриля.
Чого ми поки не знаємо: чи сподобалось замовнику. Живого демо в інтернеті немає, шаблон він бачить тільки на картинці і в GIF. Оцінки на момент запису кейсу не було. Допишемо, коли прийде.
Помилки і що винесли
