Terra que Gira Ultra

Sobre este efeito

Um planeta Terra feito com imagens de satélite, girando devagar no escuro. Do lado virado pro sol aparecem os continentes, as nuvens e o reflexo do sol no mar; do lado da noite, as cidades acesas, que somem embaixo das nuvens. A atmosfera acende em azul na borda do lado do sol, a passagem do dia pra noite é suave como vista do espaço, e as nuvens andam um pouquinho mais rápido que o chão. Arrastando com o mouse ou com o dedo, o planeta gira e inclina pra mostrar mais o norte ou o sul; ao soltar, segue no embalo e volta sozinho ao giro normal, com a mesma velocidade em telas de 60 e de 120 Hz. No celular, arrastar na vertical continua rolando a página. Com o foco nele, as setas do teclado giram e inclinam, e um botão opcional pausa o giro. Enquanto as imagens grandes chegam aparece uma Terra pequena que já vem dentro do código, e a troca é um esmaecer curto, sem piscar. Gira sozinho a 30 quadros por segundo e não desenha nada fora da tela, com a aba escondida ou pausado. Com a preferência de menos movimento, a Terra fica parada numa pose escolhida e só gira quando alguém arrasta, sem embalo. Tempo de uma volta, longitude inicial, inclinação do eixo, posição e altura do sol, nuvens, vento, luzes das cidades e a cor delas, cor e brilho da atmosfera, reflexo no mar e tamanho ajustáveis. As três imagens de satélite (dia, noite e nuvens, 373 KB) vêm no kit e são de domínio público. WebGL, sem biblioteca; sem WebGL fica uma esfera escura feita em CSS.

Ficha

Categoria

Interação

Onde combina

topo (hero), recursos, números

Alcance

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

Plano

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

Peso

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

No celular

Leve: usa 9% 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-terra-que-gira.

Assuntos

• terra
• planeta
• globo
• mundo
• 3d
• webgl
• satélite
• espaço
• noite
• cidades
• arrastar
• girar
• hero
• interação