# Orbit

Ícones ou pequenos elementos que giram em círculos ao redor de um centro, como planetas em volta do Sol.

> O Orbit é um componente do THM Componentes que faz ícones ou qualquer conteúdo girar em órbita ao redor de um centro, como planetas em volta do Sol. É só CSS, leve, com raio, duração, sentido e trilha circular ajustáveis, e serve bem para mostrar um ecossistema de integrações em volta do logo do produto.

- Categoria: 3D e espaço
- Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM
- Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível
- Tecnologia: Vue 3, TypeScript, Tailwind CSS v4
- Interação: Nenhuma: o efeito roda sozinho
- URL: https://vibecode.thmtecnologia.com/componentes/orbit/

## 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

```text
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.

## Componentes relacionados

- [Icon Cloud](https://vibecode.thmtecnologia.com/componentes/icon-cloud/): Bola de ícones redondos girando em 3D, que segue o mouse e traz para a frente o ícone clicado.
- [Animated Beam](https://vibecode.thmtecnologia.com/componentes/animated-beam/): Linhas finas ligam ícones e cards, e um pulso de luz colorida corre por elas, mostrando os dados em movimento.
- [Circular Gallery](https://vibecode.thmtecnologia.com/componentes/circular-gallery/): Fotos, logos ou ícones dispostos em roda que giram sem parar em volta do centro e podem pausar com o mouse.
- [Animated Logo Cloud](https://vibecode.thmtecnologia.com/componentes/logo-cloud/): Uma faixa com os logos dos seus clientes passando devagar, numa cor só, abaixo de um título curto.
- [Spinning Text](https://vibecode.thmtecnologia.com/componentes/spinning-text/): Uma frase curta dá a volta num círculo e gira sem parar, como um selo carimbado ao lado do botão.

---
THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.