Interactive Global Availability Globe

Інтерактивний WebGL-глобус для візуалізації глобальної присутності компанії, часових поясів і доступності регіональних команд у реальному часі.

Цей прототип створений як комерційний UI-компонент для міжнародних компаній, SaaS-сервісів, логістичних бізнесів, support-команд або агенцій, які працюють з клієнтами в різних часових поясах.

Проєкт не є просто декоративною картою. Його задача — допомогти користувачу швидко зрозуміти, де знаходяться команди компанії, який там локальний час і чи доступний зараз потрібний регіональний офіс.

Основний функціонал
інтерактивний WebGL-глобус;
ручне обертання глобуса курсором;
маркери офісів / регіональних команд;
список локацій, відсортований за часовими поясами від UTC- до UTC+;
клік по локації центрує глобус на відповідному маркері;
активний маркер підсвічується;
tooltip показується тільки для активної локації;
локальний час для кожного регіону;
статус доступності команди: Available now, Opening soon, After hours, Weekend;
CTA для контакту з активним регіоном;
накладання сітки паралелей, меридіанів і меж часових поясів;
адаптивний інтерфейс для desktop і mobile.
Комерційна цінність

Такий компонент може використовуватись на сторінках:
Contact us;
Global offices;
Our team;
Support availability;
Enterprise / SaaS landing page;
Logistics operations dashboard.

Він допомагає замінити статичну карту більш корисним і візуально сильним інструментом: користувач не просто бачить локації, а одразу розуміє актуальний час, доступність команди та найкращий регіон для контакту.

Технічна реалізація

Проєкт реалізовано на базі:
React
Vite
COBE WebGL globe
Canvas overlay
Timezone Boundary Builder GeoJSON
JavaScript Date / Intl API
Vercel deployment
GitHub repository workflow

Для глобуса використовується WebGL-рендеринг через COBE, а поверх нього додатково накладається кастомний canvas-шар для сітки, часових поясів і візуальних елементів. Дані локацій організовані як масив об’єктів, тому компонент можна легко адаптувати під реальні офіси, партнерські регіони або support-команди клієнта.

Результат
У результаті створено production-ready прототип інтерактивного глобального availability-віджета, який можна використовувати як основу для:
React-компонента;
WordPress/Gutenberg-блоку;
embedded-віджета для корпоративного сайту;
SaaS landing page секції;
кастомної карти офісів або сервісних регіонів.

Проєкт розміщено на Vercel і підключено до GitHub-репозиторію для подальшого розвитку та автоматичного деплою.

#React #Vite #WebGL #COBE #Canvas #JavaScript #FrontendDevelopment #InteractiveUI #UIDevelopment #UXDesign #SaaS #WebApp #DataVisualization #Timezone #GlobalAvailability #InteractiveGlobe #Vercel #GitHub #PortfolioProject #CustomWebDevelopment