Завдання
Канал @mawrolly монтує едіти за «Гравіті Фолз», «Фінеасом і Фербом», «Зоряною принцесою» і аніме. На старті 260,6 тисячі підписників і 22,1 мільйона лайків. Гроші приносять реклама треків і відео, продаж проєктів After Effects і монтаж на замовлення. Але свого адресу в мережі не було: рекламодавець писав у особисті і не знав цін, покупець проєкту приходив із ролика і чекав живої відповіді, часом до ранку.
Канал веде син, тому бриф ми писали самі собі: сайт-вітрина з формою замовлення реклами, магазин із оплатою і видачею файлів без продавця, два мовні варіанти. І заодно перевірити на собі повний цикл інтернет-магазину цифрових товарів без своєї бази даних і без постійних витрат.
Окрема біда покупців: проєкт із новішого After Effects у старішій версії не відкривається, а повернення немає. Тож на кожній картці мала стояти мінімальна версія, а поруч потрібен був спосіб понизити версію файлу.
Навіщо і яка ідея
Три людини, три проблеми. Рекламодавець обирає канал і тип реклами, ціна підставляється сама (реклама треку на mawrolly від 50 $, на партнерських каналах від 35 $), заявка летить у Telegram. Покупець кладе проєкт у кошик, платить криптою і отримує посилання одразу після підтвердження мережі. Власник старого After Effects бачить версію на картці і понижує файл у конвертері, який працює повністю в браузері.
Головну суперечку магазину вирішував «консиліум» із пʼяти AI-радників: попередження про плагіни й версії мають стояти перед покупкою, але не закривати товар. Відповідь: попередження і покупка стали одним кроком, галочкою «розумію умови» прямо над кнопкою оплати. Висота мобільної сторінки магазину впала з 5421 до 2946 пікселів.
Той самий консиліум скасував підводну тему з рибами, коли десятки CSS-правок не рятували шапку. Картинки для фону обирали не на око, а вимірами: контраст заголовка по пікселях самих літер, збіг кромки двох кадрів (підсумок 0,43 з 255).
Хід роботи
| Коли | Що відбувалося |
|---|---|
| Етап 1 | Референс у стилі Jinx/Arcane. Версії v1-v4 йшли то в піратську тему, то в корпоративний стиль, повертали до правила: структура з референсу, тематика з реального контенту каналу. Палітру зняли з пікселів банера і аватарки |
| Наступні дні | Підводна тема: шапка над водою, середина і дно під водою. Багато раундів правок шва між зонами, спійманий баг зі схлопуванням відступів |
| Через 9 днів | Консиліум скасував «рибʼячу» тематику. Шапку замінили одним кадром зі вбудованою ватерлінією. Куплено домен, сайт на mawrolly.com, ціни на рекламу затверджено |
| Наступний день | Магазин на 3 товари, логотип «M з монтажної стрічки», заголовки безпеки, robots і sitemap, GA4 і Clarity |
| Через тиждень | Свій конвертер версій замість чужого, кошик, крипто-оплата NOWPayments, автоматична видача файлів |
| Через два дні | Тестова покупка справжніми грошима пройшла весь ланцюжок. Переписано умови, три пункти яких були неправдою. Консиліум: номер замовлення будує сервер, замовлення пишеться знімком угоди, сповіщення в Telegram, ліміт на створення рахунків |
| Ще через день | Чат-помічник на Claude Haiku 4.5 на проді |
| Через три тижні | Новий мальований логотип через CSS-маску, промокоди, акція з автоматичним закінченням. Далі акція -50% безстроково і безкоштовний проєкт з окремою видачею без оплати |
| Наступний місяць | Четвертий канал на головній, блок спільноти, розмітка подій воронки в GA, лічильник підписників знову автоматичний. Перевірка захисту, стеля витрат на чат, CSP без unsafe-inline |
Чим робили
Сайт зібраний зі статичних HTML-сторінок і serverless-функцій Node.js на Vercel, своєї бази даних немає. Домен і DNS на Cloudflare, проксі вимкнено, щоб Vercel міг випустити сертифікат. Фони і логотип генерувалися в Nano Banana Pro, шрифти Russo One і Rubik. Картинки і значки міряли скриптами на Python з PIL.
Оплата: NOWPayments, рахунок створює /api/checkout. Ціни і знижки рахує сервер зі свого каталогу, а не браузер. Сповіщення про оплату перевіряється за підписом HMAC, без неї відповідь 401. Комісію мережі доплачує покупець.
Видача файлів: архіви проєктів лежать у приватному сховищі Vercel Blob. Право на завантаження зашите в саме посилання: id товару, номер замовлення, строк 72 години і підпис. Сервер перераховує підпис, тому база замовлень для видачі не потрібна. Telegram-бот пише власнику про кожну оплату, недоплату і збій запису замовлення.
Чат: Claude Haiku 4.5 через Anthropic API, кеш системного промпта, інструменти create_lead і check_ae_version. Усі числа (порівняння версій, кількість товарів, вилку цін) рахує звичайний код, модель тільки переказує. Стеля 200 відповідей на добу на сайт і 30 на одну людину, тобто не більше ~15 $ на місяць.
Захист: CSP без вбудованих скриптів (14 інлайн-блоків винесені у файли), HSTS, X-Frame-Options DENY, ліміти частоти на оплату, безкоштовну видачу, промокоди, чат і статус замовлення. Усі ключі тільки в змінних оточення Vercel. Аналітика: GA4 з подіями воронки, Microsoft Clarity для теплових карт, Search Console. Загалом близько 7 200 рядків коду в сторінках, функціях і скриптах магазину.
Результат
Головна: повноекранна шапка з островом і кораблями, вода йде вниз під весь сайт. Лічильники каналу, блок «Мої канали» на чотири акаунти, три обрані проєкти, спільнота (Discord і Telegram), форма замовлення реклами. Дві мови, вибір спільний для всіх сторінок. Лічильник підписників читає публічні сторінки профілів TikTok із кешем на 6 годин, при відмові показує вшиті цифри.
Магазин: 23 товари, 21 едіт, 1 пак кольорокорекції, 1 безкоштовний проєкт. У кожній картці превʼю-відео, версія After Effects, список платних плагінів, без яких ефекти відкриються як missing. Сторінка товару з розміткою Product для пошуку, у пака кольорокорекції галерея: один кадр під кожен із 9 пресетів. Кошик з однією галочкою на всі товари, оплата криптою, запасний шлях через Telegram, після оплати сторінка сама опитує статус і показує кнопки завантаження.
Що перевірили. Наскрізна покупка: рахунок на 10 $, прийшло 10,147 USDT у мережі BSC, сповіщення пройшло перевірку підпису, файл видано, посилання віддає справжній .aep. Підміна id товару в посиланні дає «Посилання недійсне». Спроби підробки на проді: прислали ціну 0,01 $, сервер виставив свої 15 $; промокод із підсунутим відсотком 99 дав чесні -10 %; платний товар через безкоштовну видачу отримав 403; сповіщення без підпису 401; прямий адрес файлу в сховищі 403. Конвертер: зібрали штучний «проєкт із AE 2026» зі справжнього і прогнали назад униз, результат збігся з оригіналом байт у байт, усі 6 686 589 байт. Чат: системний промпт і інструменти 7 558 токенів, прогін із 7 питань коштував 1,76 цента.
Відвідуваність за два місяці: 1 215 переглядів, 331 користувач. За один тиждень: 171 перегляд (+40 % до попереднього), 15 додавань у кошик, 5 переходів до оплати, 4 безкоштовні завантаження і 0 оплат. Пʼятеро дійшли до рахунку і ніхто не заплатив: єдиний спосіб оплати зараз крипта. Наступний крок уже вирішений, LiqPay для карток. Чого ми поки не знаємо: чи відкривається файл після конвертера в живому After Effects. Байти сходяться, перевірка в програмі за автором каналу.
Помилки і що винесли
