Globo de Pontos Ultra

Sobre este efeito

Globo feito de pontos, com os continentes desenhados, girando devagar sozinho, com os seus lugares marcados em cima. Cinco jeitos de marcar, que dá pra misturar no mesmo globo: etiqueta com o nome (o detalhe abre no mouse, no foco ou no toque), ponto com anéis pulsando, contador com uma bolinha piscando e o número de agora, polaroide com foto e legenda (endireita e cresce quando você chega nela) e pontos luminosos de tamanhos diferentes. E dois enquadres: o globo inteiro ou o horizonte, com um globo grande saindo do pé da seção, que sobe quando ela aparece, com o título por cima. Arraste pra girar: ao soltar, ele segue no embalo e volta a girar sozinho. No celular, arrastar de lado gira e rolar a página continua normal. Com o foco no globo, as setas giram; o Tab passa de marca em marca e o globo vira pra deixar cada uma de frente. As marcas são texto de verdade na página, legíveis, selecionáveis e lidas pelo leitor de tela como uma lista; cada uma some quando o lugar passa pra trás do globo, e duas marcas nunca ficam uma em cima da outra: a da frente fica e a outra desce pra baixo do ponto ou espera a vez. Com o mouse numa marca, o giro para enquanto você lê. Fora da tela, com a aba escondida, pausado ou parado, não desenha nada; a velocidade é a mesma em telas de 60 e de 120 Hz. Com a preferência de menos movimento, o globo fica parado de frente pras marcas e continua arrastável. Tempo de uma volta, inclinação, longitude de frente, quantidade e tamanho dos pontos, pontos no mar, sombra na borda, cores da terra, da esfera, do brilho e das marcas, embalo, tamanho da foto e o enquadre do horizonte ajustáveis. WebGL, sem biblioteca; sem WebGL, ele continua funcionando.

Ficha

Categoria

Interação

Onde combina

topo (hero), prova social, recursos

Alcance

Área: vive dentro de um bloco da página.

Plano

Exclusivo de quem assina o Ultra (R$ 39,90/mês).

Peso

19 KB de código comprimido. Sem biblioteca externa.

No celular

Leve: usa 19% do processador de um celular intermediário enquanto anima.

Placa de vídeo

Desenha com a placa de vídeo; em celular muito simples a fluidez depende dela.

Na loja desde

25/09/2026

Como colocar no seu site

1. Criando o site com IA (Claude Code, Codex e parecidas): baixe o kit, extraia na pasta do projeto e cole o pedido pronto que a loja entrega. Não precisa saber programar.
2. Usando um construtor (Elementor, Shopify, Webflow e outros): a loja mostra o passo a passo de cada um.
3. Programando: importe o efeito.css e o efeito.js e marque o elemento com a classe fx-globo-de-pontos.

Assuntos

• globo
• mapa
• mundo
• terra
• planeta
• pontos
• marcadores
• etiquetas
• polaroide
• fotos
• pulso
• ao vivo
• contador
• arrastar
• webgl
• hero
• prova social