Интерактивный глобус глобальной доступности

Интерактивный 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