Avala Design
← Components/domain/marketing

Globe

Base sphere color

domain/marketingstablea11y: untested2/3 coverageEdit on GitHub ↗

Live playground

Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.

LiveOpen all variants in Storybook ↗
Edit JSX — preview updates livereact-live
import { Globe, GlobeLocation, GlobeTheme } from "@avala/design";

<Globe>
  <GlobeLocation />
  <GlobeTheme />
</Globe>

All variants

The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.

domain-marketing-globe--defaultOpen in Storybook →

When to use

  • Marketing hero / about-page coverage map showing where Avala operates.
  • Investor-deck visualisation of customer / data-source distribution.
  • Any one-off decorative geographic surface where a static map is too flat.

When not to use

  • Real geographic data viz where users need to read precise lat/lng — use Mapbox / Leaflet / a real map library.
  • Mobile-first surfaces — the WebGL load is heavier than a marketing tile typically wants. Render a static fallback at viewport widths < 768px.
  • Anywhere with a strict perf budget — three.js + dot-density geometry isn't cheap.