MojiMotion — анімовані емодзі для Telegram

MVP веб-застосунку (і Telegram Mini App) для створення анімованих емодзі в стилі Auto Emoji Maker: вводите текст або завантажуєте SVG-логотип, обираєте персонажів, кольори та розмір і отримуєте готові файли .tgs для Telegram (або Lottie JSON). Усе працює в браузері, без сервера, акаунтів і кабінетів.

Можливості

• Текст → вектор. Текст перетворюється на контури (opentype.js), тож у файлі немає текстових шарів, які Telegram не підтримує. 13 вбудованих шрифтів із кирилицею (Nunito, Rubik, Unbounded, Montserrat, Russo One, Dela Gothic, Lobster…), до 3 рядків, обводка, міжлітерний і міжрядковий інтервали, ВЕЛИКІ ЛІТЕРИ. Можна завантажити свій шрифт (TTF / OTF / WOFF).
• SVG-логотипи. Імпорт path, rect, circle, ellipse, line, polyline, polygon, <use>, вкладених <svg>, трансформацій, CSS-класів із <style>, прозорості, fill-rule, обводок і лінійних/радіальних градієнтів. Режими «оригінальні кольори» або «перефарбувати», плюс контур-наліпка навколо лого. SVG ніколи не вставляється в сторінку (безпечно щодо скриптів у файлі).
• 22 анімовані персонажі: класика, стрибок, серце, зірка, вогонь, корона, репліка, блиск, орбіта, блискавка, кільце, стрічка, «вау», свято, наліпка, бум, сонце, монета та 4 шаблони «лише лого» (політ, оберт, пульс, желе).
• Кольори. Готові розфарбовки (Mono, Nebula, Lava, Ocean, Mint, Candy, Gold, Neon, Paper), випадкові палітри (🎲), заливка / обводка / акцент персонажа з градієнтами (лінійний з поворотом або радіальний), товщина обводки.
• Розмір і висота тексту/лого, живий перегляд на світлому, темному та прозорому фоні, а також «у чаті».
• Редагування прямо на полотні. Текст/лого можна перетягувати, змінювати розмір за кути й повертати — мишею (плюс колесо для масштабу, стрілки й [ ] з клавіатури) або пальцями (одним — рух, двома — масштаб і поворот).
• Замочок пропорцій. У кутку полотна — замочок: закритий — кути змінюють розмір пропорційно; відкритий — вільне розтягування: кути тягнуть ширину й висоту окремо, а на сторонах з'являються ручки лише для ширини чи лише для висоти (у власних осях тексту/лого, тож і повернутий текст тягнеться «вздовж себе»). Працює і для тексту/лого, і для захоплених частин анімації; «Скинути положення» повертає пропорції.
• Градієнт на полотні. Кнопка з двома кружками біля градієнта (заливка тексту/лого, заливка, обводка чи акцент емодзі; «Створити градієнт» відкриває її одразу) показує на прев'ю ручки градієнта: кружки тягнуться, щоб розтягнути, стиснути чи повернути градієнт (майже рівні лінії вирівнюються), лінія між ними — щоб зсунути, у радіальному — центр і край. Дотик до кружка відкриває його колір (або фарбує обраним кольором), улюблений колір можна просто кинути на кружок. Під полотном: обидва кольори й обмін, лінійний/радіальний, поворот на 45°, скидання та «Сила» — наскільки градієнт доходить до другого кольору (0 % — суцільний колір), доріжка повзунка показує сам градієнт. Позиції зберігаються відносно зафарбованої області, тож той самий градієнт лягає на всі фігури й шаблони; анімація на час редагування стоїть. Службові класи для ручок є лише в прев'ю — у TGS вони не потрапляють.
• Анімований інтерфейс: кубик справді котиться й міняє грані, вкладки мають «пігулку», що ковзає, меню й вікна плавно з'являються та зникають, іконки анімуються при натисканні. Усе на CSS і вимикається системним «Зменшити рух».
• Свій Lottie / TGS. Імпортуйте готову анімацію — редактор розбирає її на частини (шари, шари всередині композицій, групи фігур) з мініатюрами й сам підсвічує схоже на текст/лого. Будь-яку частину можна сховати, а текст/лого — замінити своїм: новий текст чи SVG-лого стає на місце старого й рухається за його анімацією. Також можна змінити будь-який колір або накласти свій текст/лого поверх. Текстові шари й зображення (їх не підтримує Telegram) позначаються попередженням.
• Окремі контури в шарі. Якщо фігура й лого намальовані в одному шарі чи групі, список показує кожен контур окремо («Ellipse 1», «Path 1»… з типом «контур»): його можна сховати оком 👁, а кнопка «Лишити тільки цей контур» одним дотиком ховає решту контурів групи (лого з багатьох контурів зникає разом, фігура лишається). Колір у контура спільний з групою, тож під ним показано кольори групи. Працює й для всіх обраних стікерів паку разом.
• Кілька текстів. Кнопка «+ Текст» у «Шарах» додає ще один текст окремим шаром — скільки завгодно (поруч із захопленим шаром або зверху). Обраний текстовий шар показує свій редактор: слова, шрифт, колір, колір і товщина обводки, великі літери; шар перебудовується на місці (позиція, прозорість, порядок, кольори й градієнти з «Кольорів шару» лишаються). Зберігається як вставлене лого: налаштування разом із готовими контурами, тож не чекає шрифтів.
• Прозорість шарів. У захопленої частини (шару, групи, вашого тексту/лого на місці старого) є повзунок «Прозорість» 0–100 %: множиться з власною прозорістю частини, разом з її анімацією; для null-шару — на всі шари, прив'язані до нього (Lottie сама її не передає). У списку частина позначається відсотком; перетягування на полотні й «Скинути положення» прозорість не чіпають; Ctrl+Z, «Змінювати всі обрані разом» і «Скинути» працюють і з нею.
• Чужі анімації без поломок. Відкриваються .json, .tgs і .lottie (dotLottie з LottieFiles, з картинками всередині). Вирази After Effects (wiggle, loopOut, прив'язки між шарами…) виконує лише повний веб-плеєр — ні Telegram, ні прев'ю їх не запускають, тож такі файли виглядали поламаними. Під час імпорту анімація один раз програється повним плеєром (він завантажується окремо й лише для таких файлів), а значення кожної властивості з виразом записуються звичайними ключовими кадрами (прямі відрізки зливаються, щоб файл не ріс). Неквадратні сцени (1920×1080, 800×600…) вписуються в 512×512 у композиції розміру свого кадру, тож те, що було за краєм, не вилазить у поля; у списку шарів ця рамка не показується. Якщо у файлі лишилося те, чого Telegram не показує (ефекти шарів, текст, картинки, 3D, Merge Paths), панель шарів про це попереджає. Перевірено на 93 анімаціях з прикладів rlottie і 228 анімаціях самого Telegram.
• Готові паки як шаблони. Надішліть боту стікер чи емодзі з будь-якого паку (або посилання t.me/addstickers/…, t.me/addemoji/…, чи вставте його в редакторі на плитці «Пак стікерів») — редактор завантажить усі анімовані стікери, приведе їх до формату Telegram (512×512, 60 FPS), сам знайде лого/напис, спільний для всіх стікерів паку (порівнює контури незалежно від положення й розміру; копії-обводки ховає), і підставить замість нього ваш текст чи лого. Паки з'являються в «Мої паки»; адміністратор бота може додати пак у «Шаблони бота» — їх бачать усі користувачі.
• Автооформлення паку. Після імпорту редактор сам шукає лого паку — і як окремий шар, і коли його літери намальовані в одному шарі чи групі з персонажем (послідовність груп/контурів, що повторюється в більшості стікерів; підкладка-бейдж під лого лишається). Старе лого ховається, а на його місце стає слот із вашим текстом/лого: тієї ж рамки, з тією ж анімацією, без чужої заливки. Кольори паку — одним дотиком «як у лого» (чи тексту) або «з палітри»: родини кольорів (основний колір із тінями й відблисками) переходять у фірмові кольори з тими самими тінями, сірі/чорні/білі не змінюються; «Оригінальні» повертає все. Нові паки одразу фарбуються в кольори лого (перемикач у картці).
• Основні кольори всього паку. Перемикач у вкладці «Шари» відкриває основні кольори паку з частками (родини кольорів по всіх стікерах, окремо — чорні, сірі й білі). Новий колір одразу застосовується в усіх стікерах паку разом з тінями й відблисками; ↺ біля кольору повертає його.
• Зміни для всього паку. Перемикач «Змінювати всі обрані разом» у панелі імпортованої анімації (і кнопка «Обрати весь пак»): кольори, вибір лого для заміни, приховані й переміщені частини, текст поверх і скидання переносяться на всі обрані імпортовані анімації. У кожному стікері відповідна частина шукається за формою (для простих фігур — ще й за місцем), за змістовною назвою шару або за тим самим місцем у структурі файлу; лого відповідає лого. Після зміни видно, до скількох стікерів її застосовано.
• Обране й свої пресети. Кольори — зірочкою ⭐ у будь-якій палітрі (з'являються рядком «Обране» у всіх палітрах), утриманням будь-якого кольору палітри (додається, не застосовуючись; обрані позначені зірочкою) або кнопкою «+ Додати» у смужці «Обрані кольори» — палітра, де дотик додає/прибирає колір, плюс свій HEX чи піпетка, а також усі кольори імпортованої анімації чи вибраної частини одним натисканням. Лого — зірочкою біля свого SVG або прямо зі списку частин імпортованої анімації: частина перетворюється на SVG (фігури, заливки, обводки, градієнти) і стає лого для будь-яких інших емодзі. У «Готових розфарбовках» кнопка «Свій пресет» зберігає поточні кольори — за бажанням разом із лого чи текстом, тож пресет одразу дає готовий шаблон. Усе зберігається на пристрої й не зникає після «Скинути все».
• Обрані кольори під рукою. На вкладках «Текст», «Кольори» й «Шари» над панеллю — смужка обраних кольорів: колір можна перетягнути на будь-який кружок кольору (сторінка сама прокручується біля краю) або торкнутися його й далі торкатися кружків, щоб пофарбувати кілька поспіль («Готово» — вийти). У палітрі обране тепер показано першим.
• Керування обраним. Кнопка «Змінити» біля кожного списку обраного (кольори, лого, лого у «Шарах») вмикає вибір: дотики позначають елементи галочкою, «Видалити (n)» прибирає позначені, «Обрати всі» / «Зняти вибір», а «Очистити все» видаляє весь список після підтвердження (у Telegram — нативний діалог). Поки вибір увімкнено, дотик нічого не фарбує, не вставляє й не перетягує.
• Шари: лого з «Обраного» прямо в анімацію. У вкладці «Шари» збережені лого можна перетягнути (пальцем чи мишею) у список шарів: між шарами — окремим шаром, на шар, групу чи прекомпозицію — всередину, тоді лого рухається разом із нею; дотик додає лого зверху. Шари перетягуються за ⋮⋮ вгору, вниз і в/з груп (або кнопками «Вище», «Нижче», «З групи»); вставлені лого можна видалити. Зміни зберігаються як операції над оригінальним файлом (для паків — і між сесіями), а приховані, замінені й переміщені частини лишаються прив'язаними до тих самих шарів.
• Ваш текст у шарах. Першим у смужці над списком шарів — ваш текст (чи лого): його можна перетягнути між шарами або на шар чи групу — текст стане на цю глибину й рухатиметься разом з тим, куди його кинули (дотик — зверху). У списку з'являється рядок «★ Ваш текст», який тягнеться за ⋮⋮ як будь-який шар; нове перенесення прибирає старе місце, а видалення рядка повертає текст поверх анімації. Сам текст лишається «живим»: змінюйте його, шрифт і кольори як завжди.
• Кольори шару. Коли обрати шар (дотиком у списку чи подвійним дотиком на полотні), під ним відкривається вікно «Кольори шару»: усі його заливки, обводки й градієнти — зі своїми кольорами. Колір змінюється лише в цьому шарі (палітра вище міняє колір усюди); у градієнта — кожна точка кольору, лінійний/радіальний, а перший градієнт шару одразу показує ручки на полотні: кружки тягнуть і повертають саме цей градієнт, дотик до кружка відкриває його колір у вікні. Для «★ Ваш текст» чи заміненої частини вікно показує кольори тексту/лого. Працює з «Змінювати всі обрані разом»; «Скинути кольори» прибирає й кольори шарів; анімовані кольори після зміни стають сталими (позначені крапкою). Суцільну заливку чи обводку можна зробити градієнтом (кнопка біля кольору): два кольори — її власний і помітно світліший/темніший відтінок, зверху вниз через усю фігуру шару (радіальний — від центру); далі як будь-який градієнт — точки кольору, лінійний/радіальний, ручки на полотні. Прозорість, правило заливки, товщина й з'єднання обводки лишаються; «Знову суцільний колір з файлу» повертає як було.
• Одне лого. Ваш текст/лого з'являється один раз: або замість частини анімації (рухається з нею), або поверх — ніколи обидва.
• Плеєр: відтворення/пауза, таймлайн із перемотуванням (під час перемотки пауза), час, швидкість 0.5× / 1× / 2×.
• Розділи, як у Telegram-застосунках. Нижня панель (на широкому екрані — у шапці): Створити (редактор), Студія (створені ботом паки з посиланнями, паки-шаблони, додавання паку за посиланням), Чернетки і Профіль (мова, світла/темна тема, автооформлення паків, скидання). У шапці — назва розділу й скільки емодзі обрано.
• Видалення, скасування, копіювання. Біля ручок повороту й масштабу на полотні — червоний «×» (і клавіша Delete/Backspace): ховає захоплену частину анімації, прибирає ваш текст/лого з цієї анімації (на вбудованому шаблоні — очищає текст/лого). Ctrl/⌘+Z скасовує зміни (текст, кольори, розміщення, правки шарів), Ctrl/⌘+Shift+Z чи Ctrl+Y — повторює; на телефоні — кнопка ↶ поруч із «Завантажити». Ctrl/⌘+C копіює захоплений шар (з його групами, заливками, батьківськими шарами й ресурсами), Ctrl/⌘+V вставляє його в іншу імпортовану анімацію — і в іншому вікні чи вкладці редактора (через системний буфер обміну); SVG-код із буфера вставляється як лого. На телефоні — кнопки «Копіювати шар» / «Вставити шар» у вкладці «Шари».
• Чернетки. Кнопка 💾 поруч із «Завантажити» (і в розділі «Чернетки») зберігає поточну роботу: текст/лого, шрифт, кольори, розміщення й обрані шаблони — з мініатюрою. Чернетку можна відкрити, оновити, перейменувати (дотик до назви) чи видалити; вони зберігаються в браузері й переживають скидання редактора.
• Шаблони згортаються. Вбудовані персонажі — такий самий пак, як імпортовані: його можна згорнути, кнопки «Свій Lottie / TGS» і «Пак стікерів» лишаються під рукою окремим рядком.
• Оформлення, дві теми. Фіолетовий акцент, білі (або темні) картки з великими радіусами, бузкові «пігулки», шрифт Nunito. Тема за замовчуванням — як у системі (у Telegram — як у Telegram), перемикається в профілі й запам'ятовується; ставиться ще до першого кадру. У Telegram шапка й нижня смуга — фіолетові, фон — як у теми. Полотно змінює фон разом із темою (прозорий фон лишається).
• Інтерфейс: вкладки «Шаблони · Текст · Кольори · Шари»; на телефоні перегляд закріплений зверху, а панель прокручується під ним; коли панель прокручено, перегляд стискається, а кнопки полотна лягають поверх нього — місця для роботи майже вдвічі більше. У Telegram редактор використовує нативну нижню кнопку й кнопку «Назад», а свайп по полотну не згортає міні-застосунок.
• Захоплення елементів. Подвійний дотик (або подвійний клік) по будь-якому елементу імпортованої анімації захоплює його: його можна рухати, масштабувати й повертати на полотні пальцями чи мишею, а в списку частин він підсвічується й має повзунки положення, розміру й повороту. Ще один подвійний дотик у тому ж місці бере більшу частину, що його містить. Натискання на рядок у списку теж захоплює частину.
• Швидко на телефоні. Плитки паків і мініатюри шарів — нерухомі картинки (один кадр, намальований у вільну мить лише для того, що на екрані, і закешований); анімація грає лише в перегляді та на плитці під курсором миші. Плитки поза екраном не малюються зовсім, а розбір великого паку йде стікер за стікером, не блокуючи інтерфейс. На паку з 75 стікерів (телефон, 4× повільніший процесор) простій сторінки — 0 довгих задач і 60 кадрів/с замість 13, прокрутка без зависань.
• Експорт: .tgs (gzip + "tgs": 1) або Lottie JSON, окремо чи одним ZIP. Для кожного файлу перевіряються ліміти Telegram: 512×512, 60 FPS, ≤ 3 с, ≤ 64 КБ. Типовий розмір — 1–5 КБ.
• Інтерфейс українською, російською та англійською. Налаштування зберігаються в localStorage.

Клієнтський застосунок: генерації, оплата, PRO

Звичайний користувач бачить простий застосунок (мобільний у першу чергу): Головна · Створити · Мої · PRO · Профіль, зверху — баланс «✨ Генерації: N» (дотик — поповнення).

• Створити дизайн: шаблон → фото з телефону → логотип → текст → «Згенерувати». Розставляє все сам: фото обрізається в коло й векторизується (емодзі Telegram — лише векторні фігури), PNG/JPG-логотип теж (фон прибирається), SVG — як є; логотип стає значком на фото, текст — під картинкою, довгий переноситься на два рядки й підбирає розмір під місце. Блок вписується в будь-який шаблон зі збереженням пропорцій і не виходить за межі. Безпечні налаштування: розмір, вище/нижче, колір тексту, шрифт, кольорова тема. Задетальний дизайн (> 64 КБ) не генерується — з поясненням.
• Генерація списує cost генерацій на бекенді атомарно (Lua-скрипт у Redis): баланс не піде в мінус, а повторне натискання, перезавантаження чи повтор запиту з тим самим id не спише вдруге. Результат — у «Мої генерації» (файли зберігаються на пристрої, список — на сервері): завантажити .tgs, надіслати в Telegram, створити емодзі-пак. Бот доставляє клієнтам лише оплачені дизайни (gens у /api/send, /api/pack перевіряються).
• Поповнення: пакети (за замовчуванням $1 за генерацію: 10 / 25 / 50 / 100 за $10 / 25 / 50 / 100; змінюються в адмін-панелі) → спосіб оплати:
  • Crypto Bot (Crypto Pay API): рахунок у USD, оплата будь-якою криптою в Telegram;
  • Gram (GRAM — так з 15.06.2026 називається Toncoin; блокчейн TON, адреси й гаманці ті самі): клієнт підключає гаманець на сайті (TON Connect — Wallet у Telegram, Tonkeeper, MyTonWallet…; картка «Gram-гаманець» у «Поповненні» та профілі), гаманець привʼязується до акаунта (POST /api/app/wallet), і оплата йде з нього одним дотиком; або посилання ton://transfer / вручну з унікальним коментарем. Ціна в GRAM — за курсом Crypto Pay (getExchangeRates, GRAM або TON) або GRAM_USD_RATE. Генерації зараховуються тільки після підтвердження платіжною системою (Crypto Pay getInvoices / підписаний вебхук, транзакція GRAM у блокчейні TON через toncenter — коментар, сума, не bounced) і рівно один раз. Незавершений платіж запам'ятовується — після повернення з гаманця перевірка продовжується сама.
• PRO ($4.99 / 30 днів, +5 генерацій): PRO-шаблони, генерація в усіх шаблонах одним натисканням, усі шрифти й кольорові теми з градієнтами, пак з усіх дизайнів одразу. Статус PRO і доступ до PRO-шаблонів перевіряє бекенд.
• Ролі USER / PRO / ADMIN визначає бекенд (ADMIN — ADMIN_IDS, PRO — оплачений строк). Адміну в профілі доступні адмін-панель (стартові генерації, ціна дизайну, пакети, PRO, які шаблони бачать клієнти й які PRO, нарахування користувачу, платежі) і (шари, шрифти, позиції — увесь попередній функціонал); у ньому кнопка «Опублікувати для клієнтів» на стікерах паку шаблонів зберігає, куди підставляються фото/логотип/текст. Усі адмін-дії перевіряються на бекенді ( → 403 для не-адмінів).

Налаштування (Vercel → Settings → Environment Variables, потім Redeploy):

1. Сховище: Storage → Create → Upstash for Redis (або Marketplace → Upstash) і підключити до проєкту — з'являться KV_REST_API_URL і KV_REST_API_TOKEN (або UPSTASH_REDIS_REST_URL/_TOKEN; з власним префіксом — <PREFIX>_REST_API_URL/_TOKEN, теж підхоплюються). Без нього генерації безкоштовні, а адмін усе одно бачить розширений редактор.
2. ADMIN_IDS — ваш Telegram ID (бот покаже на /id).
3. Crypto Bot: у @CryptoBot → Crypto Pay → Create App → токен у CRYPTO_PAY_TOKEN (для тестів — @CryptoTestnetBot і CRYPTO_PAY_NETWORK=testnet). Там же в Webhooks увімкнути й вказати https://<проєкт>.vercel.app/api/app/cryptopay (без нього оплата підтверджується опитуванням).
4. Gram: GRAM_WALLET (або старе TON_WALLET) — адреса гаманця для прийому; за бажанням TONCENTER_API_KEY (ключ від @tonapibot, без нього 1 запит/с), GRAM_USD_RATE (фіксований курс), GRAM_NETWORK=testnet.

Якщо рахунок не створюється, у вікні оплати тепер видно причину й код: accounts-off — не підключене сховище (п. 1); method-off — немає токена/гаманця; UNAUTHORIZED — токен Crypto Pay не той або з іншої мережі (токен з @CryptoTestnetBot працює лише з CRYPTO_PAY_NETWORK=testnet, з @CryptoBot — без неї); інші коди — помилка Crypto Pay (див. документацію). Якщо Crypto Pay не приймає кнопку «повернутися в застосунок» (paid_btn_url), рахунок створюється без неї.

API: POST /api/app/me | generate | pay | pay-status | wallet | admin, GET /api/app/catalog | template-edits, POST /api/app/cryptopay (вебхук) — одна функція Vercel api/app/[action].ts.

Запуск

npm install
npm run dev        # http://localhost:5173
npm test           # юніт-тести (vitest)
npm run build      # типізація + продакшн-збірка в dist/
npm run preview    # перегляд збірки

Потрібен Node.js 20+.

Як додати емодзі в Telegram

1. Відкрийте бота @Stickers і надішліть /newemojipack.
2. Оберіть «Анімовані емодзі» та надішліть завантажені файли .tgs.
3. Для кожного вкажіть емодзі-відповідник, потім /publish.

Telegram Mini App

dist/ — це статичний сайт, тож його можна розмістити на будь-якому HTTPS-хостингу. У репозиторії налаштовано GitHub Pages (.github/workflows/pages.yml): кожен пуш у main проганяє тести, збирає застосунок і публікує його на https://oxytarget.github.io/lottie-emoji-editor/. Запустити деплой вручну можна з вкладки Actions → Deploy to GitHub Pages → Run workflow.

Одноразове налаштування: Settings → Pages → Build and deployment → Source: GitHub Actions. Для приватного репозиторію Pages доступні лише на платних тарифах GitHub (Pro / Team); на безкоштовному — зробіть репозиторій публічним або використайте Netlify, Vercel чи Cloudflare Pages (команда збірки npm run build, тека dist).

Потім у @BotFather → Bot Settings → Menu Button / Configure Mini App вкажіть URL застосунку.

Бот

Налаштування бота (.github/workflows/telegram-bot.yml, запуск вручну): кнопка меню «Emoji Studio» відкриває редактор, команда /start, опис і короткий опис (uk / ru / en). Потрібен секрет TELEGRAM_BOT_TOKEN (Settings → Secrets and variables → Actions). Токен ніколи не комітьте в репозиторій.

Бекенд бота (api/ + worker/src/app.ts, звичайні Web Request → Response):

• POST /api/send — у Telegram кнопка «Надіслати в чат» у вікні експорту відправляє файли сюди; бекенд перевіряє підпис initData і бот надсилає .tgs файлами користувачу в чат (альбомами по 10). Якщо користувач ще не натискав Start, Mini App попросить дозвіл на повідомлення й повторить спробу;
• POST /api/pack — бот сам створює емодзі-пак користувача (createNewStickerSet, тип custom_emoji, власник — користувач) або дописує в пак, створений раніше (addStickerToSet, до 200 емодзі). У вікні експорту задаються назва паку й звичайний емодзі для кожного персонажа; після створення бот надсилає посилання t.me/addemoji/.... Великі паки: Telegram створює пак одразу лише з 50 емодзі, а решту дозволяє додавати по одному й лише певну кількість за кілька хвилин, потім відповідає «retry after N s». Редактор додає рівним темпом, а таку паузу відчікує скільки треба (зворотний відлік, кнопка «Зупинити»; пауза запам'ятовується й для наступних запитів, бо ранній запит її лише подовжує). Прогрес зберігається (можна закрити застосунок і потім натиснути «Додати решту»), або пак можна розбити на кілька по 50 — вони створюються без очікування. Повтор запиту безпечний: новий пак названо за nonce клієнта, а для наявного клієнт передає, скільки емодзі в ньому нарахував (size) — бекенд звіряє з getStickerSet і не додає вдруге те, що вже потрапило в пак (Telegram іноді приймає емодзі й одразу відповідає «зачекайте», або відповідь губиться через обрив зв'язку чи тайм-аут); обірвані запити редактор повторює сам. Один запит додає не довше ~40 с (ліміт функції Vercel), решта — наступним. Файли перетворюються на полотно 100×100 (формат кастомних емодзі); якщо Telegram відхилить його, бекенд автоматично повторить із 512×512;
• POST /api/telegram — вебхук: на /start бот відповідає привітанням і кнопкою «Відкрити редактор»; на /start link — кодом для редактора в браузері (див. нижче); на стікер, кастомне емодзі чи посилання на пак — кнопкою «Відкрити як шаблони» (адміністраторам ще й «Додати в шаблони бота для всіх»); /templates — список шаблонів бота, /id — ваш Telegram ID;
• GET /api/stickerset?name=…, GET /api/sticker?id=… — анімовані стікери паку для редактора (публічні дані, кешуються CDN; файли віддаються через бекенд, бо посилання Telegram містять токен; віддаються лише .tgs);
• GET /api/templates — паки, які адміністратор додав у шаблони бота;
• GET /api/link?code=… — чи дійсний код прив'язки браузера;
• GET /api/health — перевірка, чи задано токен, і @username бота.

Паки з браузера. У Mini App бот знає користувача з підпису initData. Редактор, відкритий у звичайному браузері, у вікні «Завантажити» пропонує «Створити пак у Telegram»: кнопка «Відкрити бота» веде на t.me/<бот>?start=link, бот відповідає кодом і кнопкою «Повернутися в редактор» (#tglink=<код> в адресі) — або код можна вставити вручну. Після цього бот сам створює паки й надсилає файли в чат так само, як у Mini App. Код — це ID користувача й строк дії (90 днів), підписані HMAC від токена бота: без бази даних і без /setdomain у BotFather. Код зберігається лише в цьому браузері (вимкнути — у вікні експорту чи в профілі); прострочений бекенд відхиляє, і редактор попросить підключитися знову.

Шаблони бота для всіх. Додайте у Vercel змінну ADMIN_IDS — свій Telegram ID (бот покаже його на /id; кілька — через кому) і зробіть Redeploy. Тоді на надісланий пак бот покаже адміністратору кнопку «➕ Додати в шаблони бота для всіх». Список зберігається без бази даних — у повідомленні, яке бот закріплює в чаті першого адміністратора (не відкріплюйте його).

Варіант 1: Vercel (рекомендовано, без ключів API)

1. https://vercel.com/new → Continue with GitHub → імпортуйте lottie-emoji-editor (Framework Preset визначиться як Vite).
2. У Environment Variables додайте TELEGRAM_BOT_TOKEN = токен бота → Deploy.
3. Адреса бекенда для продакшн-збірок записана в .env.production (VITE_BOT_API_URL=https://lottie-emoji-editor.vercel.app) — і GitHub Pages-версія, і Vercel надсилають файли через нього. Для іншого проєкту змініть цю адресу.
4. Actions → Set up Telegram bot → Run workflow, у полі backend_url вкажіть https://<проєкт>.vercel.app — зареєструється вебхук (повідомлення й натискання кнопок). Після оновлень бота запустіть його ще раз.

Варіант 2: Cloudflare Workers

Workflow .github/workflows/bot-backend.yml деплоїть worker/, передає йому токен, реєструє вебхук і перезбирає сайт. Секрети репозиторію: TELEGRAM_BOT_TOKEN, CLOUDFLARE_API_TOKEN (шаблон Edit Cloudflare Workers на https://dash.cloudflare.com/profile/api-tokens), CLOUDFLARE_ACCOUNT_ID (32 символи в адресі панелі після dash.cloudflare.com/). Перед першим деплоєм відкрийте https://dash.cloudflare.com/?to=/:account/workers/onboarding, щоб створився піддомен *.workers.dev.

Локально: cd worker && npm install, створіть worker/.dev.vars з TELEGRAM_BOT_TOKEN=... і ALLOWED_ORIGINS=http://localhost:5173, запустіть npx wrangler dev, а сайт — VITE_BOT_API_URL=http://127.0.0.1:8787 npm run dev.

Скрипт telegram-web-app.js підвантажується лише тоді, коли сторінку відкрито як Mini App (є параметри tgWebApp*): застосунок розгортається на весь екран, підхоплює мову користувача та дає тактильний відгук. Деякі клієнти Telegram (зокрема iOS) блокують завантаження файлів із міні-застосунку, тому у вікні експорту є кнопка «Відкрити в браузері».

Структура

src/
  lottie/       генерація Lottie: кейфрейми, шейпи, Безьє, заливки/градієнти, збирання, експорт TGS/ZIP, імпорт, перефарбування
                розбір імпортованих анімацій на частини й їх переміщення (parts.ts), пошук спільного лого в паку (packs.ts)
  content/      текст → контури (opentype.js), SVG → контури, каталог шрифтів
  templates/    анімовані персонажі (builtin.ts) і векторні деталі (kit.ts)
  state/        стан (zustand), пресети, компіляція у Web Worker (з кешем), завантаження паків, постери плиток (posters.ts)
  components/   інтерфейс
  lib/          інтеграція з Telegram Mini App і надсилання файлів у чат
api/            функції Vercel (бекенд бота)
worker/         спільний код бекенда + вхід для Cloudflare Workers
scripts/        налаштування бота й вебхука

Ключова ідея: будь-який контент (текст чи лого) спершу перетворюється на незалежні від роздільності контури (VectorArt), а шаблон лише задає «слот», куди контент вписується, і анімацію. Згенеровані файли використовують тільки те, що підтримує rlottie (рендерер Telegram): шейп-шари, null-шари для анімації, групи, контури, еліпси, прямокутники, заливки, обводки й градієнти. Під час розробки всі шаблони перевірено рендерингом у rlottie.

Обмеження MVP

• Текст усередині SVG, растрові зображення, маски, clip-path, фільтри й візерунки пропускаються (редактор про це попереджає) — переведіть текст у криві та спростіть файл перед імпортом.
• Дуже деталізовані логотипи можуть перевищити 64 КБ — розмір видно на кожній картці.
• Лігатури й складне шейпінг-письмо (арабське, деванагарі) не підтримуються; емодзі-символи в тексті ігноруються.
• Паки: підтримуються лише анімовані (.tgs) стікери й емодзі; відео (.webm) і статичні пропускаються. Лого шукається за однаковими контурами в більшості стікерів паку — якщо в паку лого немає або кожен стікер різний, редактор кладе ваш текст поверх (це можна вимкнути), а замінну частину можна вибрати вручну в «Частинах анімації».
• Використовуйте паки, на які маєте права (свої чи шаблонні).