Como ele é
Imagine um sistema solar de brinquedo. No meio fica o elemento principal, como o logo do produto, e cada Orbit leva um ícone para dar voltas em torno dele num círculo regular, sem girar o próprio ícone, que continua de pé. Uma volta completa leva 20 segundos por padrão, em velocidade constante. Você combina vários anéis com raios diferentes, uns no sentido horário e outros no anti-horário, e espalha os ícones pelo caminho com atrasos diferentes. Uma linha fina e discreta pode desenhar a trilha de cada órbita.
Você pode estar procurando isto se pediu algo assim
- ícones das integrações girando em volta do logo do meu app
- aquele efeito de planetas orbitando para mostrar as ferramentas
- bolinhas com logos rodando em círculo ao redor do produto
- mostrar de um jeito visual com quais apps o meu sistema se conecta
- animação de órbita leve para o hero, sem 3D pesado
- logos girando em anéis, cada um para um lado
Também chamado de
- órbita animada
- orbit animation
- orbiting icons
- anéis orbitais
- integrations orbit
- sistema solar de ícones
Quando usar
- Seção de integrações com os apps conectados girando em volta do produto
- Hero de plataforma que reúne vários serviços num lugar só
- Ilustração de ecossistema, comunidade ou rede de parceiros
- Telas de espera ou estados vazios que pedem um movimento discreto
Quando evitar
- Ícones clicáveis: alvos em movimento constante são difíceis de acertar
- Telas pequenas sem ajuste de raio, já que o raio é definido em pixels
Como pedir para a sua IA
Crie uma animação de órbita só com CSS no hero: o logo do produto no centro e os ícones das integrações girando em dois anéis em sentidos opostos, com raio menor no celular, trilha circular discreta e órbitas paradas para quem prefere menos movimento.
Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Orbit
O Orbit funciona bem no celular?
Funciona, porque o Orbit é só uma animação CSS de transformação, leve até para aparelhos simples. O cuidado é o tamanho: o raio é definido em pixels, então órbitas largas podem passar da borda da tela. Peça à IA para reduzir o raio em telas pequenas ou calcular o raio a partir da largura do contêiner.
Como montar vários anéis com o Orbit?
Cada Orbit move um único elemento. Para vários anéis, use um Orbit por ícone, com o mesmo raio nos ícones do mesmo anel e atrasos diferentes para espalhar os ícones pelo círculo. Anéis com raios diferentes e sentidos invertidos criam a sensação de profundidade.
O Orbit respeita quem prefere menos movimento?
O Orbit original gira sempre, sem ler essa preferência. O prompt do THM Componentes pede à IA uma versão estática para quem ativa a redução de movimento, o que no Orbit é simples: pausar a animação CSS e manter os ícones parados em volta do centro.
