01 · Проблема
Букмекерам потрібна була live-візуалізація матчу, яка тримає гравця на сторінці між ставками. Готові трекери — важкі iframe на один-два види спорту, без 3D, повторів і можливості підлаштувати під бренд.
Кейс · SaaS
Live Sports Tracker — 2D / 3D віджет матчів
Вбудовуваний live-трекер матчів для 11 видів спорту — векторні 2D-зони, 3D-стадіон і повтори голів, що працюють від real-time стрічки подій. Vue 3, TypeScript, Three.js, Tailwind CSS.
02 · Мій підхід
Я побудував віджет на Vue 3 + TypeScript зі спільним рушієм подій і окремими сценами для кожного спорту: легкі векторні зони для слабких пристроїв і Three.js-стадіон з рухом камери, повторами голів і сценами кутових для преміум-тарифу. Події зі стрічки ставляться в чергу й анімуються в реальному часі; віджет вбудовується сніпетом, мови EN / RU / UA.
03 · Результат
Один вбудовуваний трекер на 11 видів спорту — футбол, хокей, баскетбол, дартс, CS:GO, крикет, Формула 1, теніс, волейбол, настільний теніс і гандбол — з платними 3D та повторами поверх безкоштовного 2D.
Ключові фічі
- 11 видів спорту з власними сценами й подіями
- Режими 2D-зона, 3D-стадіон і повтори
- Real-time черга подій — голи, кутові, атаки, пенальті
- Three.js-сцени, оптимізовані під мобільні
- Вбудовування сніпетом, локалізація EN / RU / UA
