Globo de pontos em canvas, girando pelo scroll

Esfera desenhada em canvas a partir de ~3 mil pontos de terra em lat/lng, em projeção ortográfica. Vive atrás do conteúdo da seção, ancorada à direita. Não gira sozinho: o ângulo segue a rolagem. Ao entrar na dobra a face mostra as Américas, e arcos entre praças acendem em sequência.

Quando usar

Seção que argumenta alcance internacional: escritórios, praças, rotas, custódia no exterior.
Como fundo, atrás de cards ou texto. Ele não é o assunto — é a atmosfera do assunto.
Quando as praças são reais e nomeáveis. Arco decorativo entre lugares aleatórios é mentira visual.

Quando não usar

Como ilustração principal de uma seção. Ele é discreto de propósito; no centro do palco, decepciona.
Em página que já tem outro efeito preso ao scroll — o listas/baralho-sticky, por exemplo. Dois competem pela mesma rolagem.
Se a empresa atua num país só. Aí é mapa, não globo.

Padrão editorial

O globo não tem texto. O que ele exige é coerência: as rotas em ROTAS precisam ser as praças reais da empresa, e o texto da seção precisa nomeá-las. Globo com arco para Londres numa seção que só fala do Brasil é ruído.

Como usar

<link rel="stylesheet" href="componentes/dados/globo-canvas/estilo.css">
<script src="componentes/dados/globo-canvas/pontos.js"></script>
<script src="componentes/dados/globo-canvas/script.js"></script>

A ordem importa: pontos.js antes de script.js. O primeiro só publica window.__GLOBE_PTS; o segundo sai em silêncio se não achar.

Trocar as praças

No script.js, a lista ROTAS é de pares {lat, lng}:

var ROTAS = [
  [{ lat: -23.5, lng: -46.6 }, { lat: 25.7, lng: -80.2 }],   // São Paulo → Miami
  [{ lat: -23.5, lng: -46.6 }, { lat: 51.5, lng: -0.1 }]     // São Paulo → Londres
];

Três arcos é o teto confortável; acima disso vira malha.

Ganchos

Gancho	Papel
`[data-globe]`	a seção
`[data-globe-canvas]`	o canvas
`[data-globe-anchor]`	opcional — a borda direita da esfera se alinha à borda direita deste elemento
`.globe-sec.is-drawn`	entrada por fade

Pareamento

Na origem, o conteúdo por cima é o conteudo/grid-entidades, e o grid de cards é a âncora. Qualquer conteúdo serve — o [data-globe-anchor] é o que amarra a esfera à coluna em vez de à tela.

Gotchas

Canvas não lê custom property. A cor é resolvida uma vez, no init, lendo --accent do elemento e convertendo para componentes rgb. Trocar o tema em runtime não repinta o globo — recarregue.
Buckets de opacidade, não um fill por ponto. São ~3 mil pontos por frame; 7 fill() contra 3000 é a diferença entre rodar e travar. Cada bucket também tem raio próprio, o que dá a sensação de profundidade na borda.
O corte é em cosC = -0.08, não em 0. O horizonte físico seria 0; estender um pouco além faz a última leva de pontos entrar pequena e apagada, em vez de a borda "desligar" de uma vez.
O arco corta em cosC = 0.03. Sem isso ele continua desenhado do outro lado da esfera e atravessa o globo visualmente.
slerp, não interpolação linear de lat/lng. Reta em lat/lng não é reta na esfera: o arco sairia torto e passaria pelo lugar errado.
devicePixelRatio limitado a 2. Em tela 3x o canvas ficaria com 9x a área de pixels para nenhum ganho visível.
Ele não gira sozinho, e isso é decisão. Giro automático em fundo compete com a leitura. Preso ao scroll, ele responde à pessoa. A face reseta para as Américas toda vez que a dobra reentra na tela — assim a leitura é a mesma independente de por onde se chegou.
pontos.js é dado, não código. Gerado uma vez com dotted-map. Não editar à mão.
No mobile ele sai de trás do texto e vira um bloco próprio acima do título. Atrás do texto numa tela estreita ele só atrapalharia.

Histórico

Projeto	Onde	Data	Diferenças
Liberta Wealth	`index.html` `#estrutura` + `initGlobe()` em `main.js`	2026-08	Origem. Função `initGlobe(structId, canvasId, opts)` chamada por id, classes `.struct`/`.struct-media`/`.geo-globe`, estado `.drawn`, sage `rgba(198,206,170,…)` cravado em quatro lugares do canvas, e — o pior acoplamento — `struct.querySelector('.ents')` para achar a âncora: o globo dependia de o grid de entidades existir e se chamar assim.

Normalizações aplicadas na extração: prefixo globe-; ids → [data-globe] / [data-globe-canvas], o que permite mais de um globo na página; .drawn → .is-drawn; a cor passou a ser lida de --accent em vez de cravada, então o globo acompanha o tema; desacoplado do grid de entidades — a âncora virou [data-globe-anchor] opcional, com fallback para a própria seção; o listener de scroll com ticking próprio virou LIB.onScroll (que já faz o mesmo); reduce local → LIB.reduce; variáveis e funções renomeadas para português, seguindo o resto da biblioteca.