# Pangeia

A light dotted globe with orange markers on major cities, turning slowly and easy to drag.

> Pangeia is a THM Componentes component that shows a light, dotted globe with orange markers on ten major cities, turning slowly. Dragging sideways spins the planet with a spring feel. It uses a compact WebGL globe library, lighter than full 3D versions, and works well to show national or international reach.

- Category: 3D and space
- Origin: Adapted from open source under the MIT license, with a ready THM prompt
- Load weight: Medium: canvas or continuous animation; fine for one section
- Technology: Vue 3, TypeScript, Tailwind CSS v4, WebGL, COBE
- Interaction: Mouse, Touch
- URL: https://vibecode.thmtecnologia.com/en/components/pangeia/

## What it looks like

It looks like a desk globe made of tiny dots, slowly turning on its axis. The sphere is light, the continents emerge from thousands of dots and ten orange markers of different sizes mark cities such as São Paulo, New York, Mumbai and Cairo. A white glow outlines the edge. On load, the globe fades in over about a second. Drag it sideways and it follows your hand with a spring; let go and it keeps turning. In the demo, half the globe rises from the bottom edge of a card, just below a large gradient word.

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

- “a simple, lightweight spinning globe to show where we operate”
- “a dotted planet with markers on cities”
- “a globe rising from the bottom of the section, startup site style”
- “a round world map turning below the headline”
- “a 3D globe that will not slow the page down”
- “a planet people can drag to show our national reach”

## Also known as

dotted globe, rotating globe, interactive globe, lightweight WebGL globe, world globe, spinning earth

## When to use

- National or international reach sections without weighing the page down
- SaaS or startup heroes with the headline above the globe
- Company numbers pages, such as countries or cities served

## When to avoid

- When you need routes or connections between cities: it only has markers
- Dark backgrounds, unless you turn on dark mode in the globe options

## How to ask your AI

```text
Create a lightweight dotted WebGL globe for our reach section, turning slowly, with markers on the cities we serve and a springy drag. Use my brand colors, pause it when off screen and keep the globe still 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 Pangeia

### Can I change the markers and colors in Pangeia?

Yes. The config prop in Pangeia accepts the globe library options: a marker list with latitude, longitude and size, base, marker and glow colors, dark mode, number of dots and map brightness. The mass, tension and friction props tune the drag spring.

### Is Pangeia lighter than the other globes?

It is rated Medium in THM Componentes, below Colmeia and Meridiano, which are Heavy. Pangeia uses a compact library built only for globes. It is still WebGL, so the prompt tells your AI to load it on demand with a static Nuxt fallback and to compare LCP and INP on mobile.

### Does Pangeia respect reduced motion settings?

The original component always spins. The THM Componentes prompt asks your AI for a static version for people who turn on reduced motion in their system, which is simple in Pangeia: stop adding the automatic rotation each frame and keep only the drag.

## 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.
- [Colmeia](https://vibecode.thmtecnologia.com/en/components/colmeia/): A blue globe with countries made of hexagons and colorful arcs crossing the planet, GitHub style.
- [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.
- [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.
- [Planetário](https://vibecode.thmtecnologia.com/en/components/planetario/): Icons or small elements circling around a center point, like planets around the sun.

---
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).