Globe

Overview

Globe gives global information a stronger visual system than a plain list of cities.

Locations can appear as labelled points across a world map or dimensional globe. Selected regions, city markers, connection lines, route paths, and view controls help visitors understand where a product operates, where teams are located, where infrastructure runs, or how global activity moves across the system.

Use Globe when geography is part of the story. It works for companies showing market coverage, data centers, customer regions, logistics routes, travel networks, expansion plans, founder presence, community distribution, event locations, or global product adoption.

The page job is orientation. The visitor should understand the global footprint quickly, then inspect specific locations without losing context. The globe should make the company feel connected, not turn the page into a dark planet simulator with marketing labels orbiting in confusion.

Install Command

Usage Code

Component Code

Example Production Use Case

A fintech infrastructure company can use Globe to show supported markets, partner regions, and transaction corridors. Visitors can see where the product operates, which regions are active, and how the network connects without reading a long geography paragraph.

The outcome is credibility through orientation. The page communicates scale, reach, and movement in one visual system.

A SaaS company can use the same component to show customer distribution, team locations, data center coverage, or launch regions. The globe gives abstract growth a concrete surface, which helps the visitor understand scope faster.

Best Used For

• Global SaaS, fintech, infrastructure, logistics, travel, and cybersecurity products.

• Office, team, customer, or partner location sections.

• Route maps, network diagrams, data-flow visuals, and regional coverage pages.

• Launch pages showing market expansion or international availability.

• Investor, enterprise, or trust pages where operational reach matters.

• Community and event pages where geographic spread is part of the proof.

Not For

Not for pages where geography is not meaningful.

Not for fake global presence. If the business only operates in one region, use a local map, market section, or customer story instead of pretending the world needs to rotate.

Not for dense operational dashboards, legal coverage lists, compliance matrices, or anything users need to scan with precision. Use tables when exact regional rules matter.

Performance Budget

Keep location count controlled, optimise route rendering, and avoid excessive label animation. If the component uses Canvas or WebGL, cap device pixel ratio, clean up animation loops, and pause motion when the component is outside the viewport.

Do not animate every marker, label, line, and globe rotation at full intensity at the same time. Global reach should feel impressive without making the browser feel like it has been asked to run air traffic control.

Accessibility and Mobile

Provide a readable text alternative for meaningful location data. A visual globe should not be the only way to access supported cities, regions, offices, or routes.

Use accessible controls for view toggles, selected locations, and route interactions. Preserve keyboard access where the component is interactive. On mobile, simplify the layout, reduce label density, shorten animations, and consider a flat map or stacked location list when the globe becomes too cramped.

For reduced motion, pause continuous rotation, remove route drawing, disable camera travel, and show a stable map or static globe state with readable location information.

Common Mistakes

• Showing too many labels at once.

• Using route lines with no real meaning.

• Making the globe decorative while hiding important location information.

• Forgetting a mobile-friendly fallback.

• Running continuous animation when the section is offscreen.

• Using vague labels like “Global” without specific locations.

• Making map controls look polished but unclear.

• Treating geography as proof when the data does not support it.