# Colmeia

A blue globe with countries made of hexagons and colorful arcs crossing the planet, GitHub style.

> Colmeia is a THM Componentes component that draws a GitHub-style 3D globe in Three.js: countries made of tiny hexagons, an atmosphere glow and colorful arcs traveling between coordinate pairs. People drag to rotate it, and automatic rotation is optional. It works well to show geographic reach or a user network.

- Category: 3D and space
- Origin: Adapted from open source under the MIT license, with a ready THM prompt
- Load weight: Heavy: WebGL or simulation; one per page, loaded on demand
- Technology: Vue 3, TypeScript, Tailwind CSS v4, WebGL, postprocessing, Three.js, three-globe
- Interaction: Mouse, Touch
- URL: https://vibecode.thmtecnologia.com/en/components/colmeia/

## What it looks like

Think of a planet seen from space in a tech keynote. The sphere has a solid color, deep purple by default and blue in the demo, and the countries show up as mosaics of very small white hexagons. A light halo wraps the edge. Thin arcs in several colors rise from one point, cross the sky as moving dashes and land on another, one after the other. Dragging turns the globe with a slight glide, but it does not zoom or flip upside down. In the demo it starts over Asia and spins on its own.

## You may be looking for this if you asked for something like

- “that globe from the GitHub homepage with colored lines coming out of countries”
- “a spinning 3D globe with arcs between cities for my homepage”
- “show where my app users come from on a planet”
- “a planet with dotted countries and animated connections”
- “an interactive globe for a worldwide reach section”
- “a 3D world map with glowing routes, startup style”

## Also known as

arc globe animation, 3D globe with arcs, hex globe, hexagon globe, globe visualization, interactive 3D globe

## When to use

- A digital product hero with users in many countries
- Global reach, community or customer network sections
- Usage statistics pages with routes between regions
- International expansion presentations

## When to avoid

- Pages that must load very fast: it depends on Three.js and a globe add-on
- Pages that already run another heavy WebGL effect
- When the map needs named cities or clickable data

## How to ask your AI

```text
Create a GitHub-style 3D globe in Three.js for our global reach section: hexagon countries, an atmosphere and animated arcs between our customers' cities. Use my brand colors, pause it when off screen and show a still image for people who prefer reduced motion.
```

With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising.

## Questions about Colmeia

### Does Colmeia need map data?

Yes. Colmeia draws countries from a GeoJSON file, which the docs tell you to download and save as globe.json in the component folder. Arcs come from the data prop, with start and end latitude and longitude, height, color and firing order.

### Can I change the colors in Colmeia?

Yes, through the globeConfig prop: globe, hexagon, atmosphere and light colors, material shine, arc duration and length, starting position and automatic rotation. Each arc in Colmeia has its own color in the data prop. The THM Componentes prompt tells your AI to use your project color tokens.

### Does Colmeia respect reduced motion settings?

The original component does not handle that preference: arcs always animate and the globe spins if automatic rotation is on. The THM Componentes prompt asks your AI for a static version for people who reduce motion and for the animation in Colmeia to pause off screen.

## Related components

- [Meridiano](https://vibecode.thmtecnologia.com/en/components/meridiano/): A dotted globe that spins on its own, with arcs of light linking 12 real cities around the world.
- [Pangeia](https://vibecode.thmtecnologia.com/en/components/pangeia/): A light dotted globe with orange markers on major cities, turning slowly and easy to drag.
- [Ponte aérea](https://vibecode.thmtecnologia.com/en/components/ponte-aerea/): A world map made of tiny dots, with arcs drawing themselves between cities marked by blue points.
- [Firmamento](https://vibecode.thmtecnologia.com/en/components/firmamento/): A night sky with stars in three sizes drifting slowly upward and shifting gently when the mouse moves.
- [Pindorama](https://vibecode.thmtecnologia.com/en/components/pindorama/): Brazil's 27 federative units as hexagons placed like the real map, darker where the number is higher.

---
THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).