01 · The problem
Sportsbooks wanted a live match visual that keeps players on the page between bets — but off-the-shelf trackers were heavy iframes covering one or two sports, with no 3D, no replays and no way to match the operator’s brand.
Case Study · SaaS
Live Sports Tracker — 2D / 3D Match Widget
Embeddable live match tracker for 11 sports — vector 2D zones, a 3D stadium and full-frame goal replays, driven by a real-time event feed. Built with Vue 3, TypeScript, Three.js and Tailwind CSS.
02 · My approach
I built a Vue 3 + TypeScript widget with a shared event engine and per-sport scenes: lightweight vector zones for low-end devices and a Three.js stadium with camera moves, goal replays and corner scenes for the premium tier. Events from the feed are queued and animated in real time; the widget ships as a snippet with EN / RU / UA locales.
03 · The result
One embeddable tracker covering 11 sports — football, hockey, basketball, darts, CS:GO, cricket, Formula 1, tennis, volleyball, table tennis and handball — with paid 3D and replay add-ons on top of a free 2D tier.
Key highlights
- 11 sports with dedicated scenes and event sets
- 2D vector zone, 3D stadium and replay modes
- Real-time event queue — goals, corners, attacks, penalties
- Three.js scenes tuned for mobile frame budgets
- Snippet embed with EN / RU / UA localisation
