Como ele é
Lembra uma roda-gigante vista de frente: os itens ficam espaçados por igual numa circunferência e giram em volta do centro sem parar, mas cada um continua de pé, como as cabines. Por padrão, o raio é de 100 pixels e a volta completa leva 10 segundos em ritmo constante; dá para inverter o sentido e mudar a velocidade e a curva do movimento. Com a pausa no hover ativada, toda a roda para quando o mouse passa sobre um item e volta a girar quando ele sai. O componente não tem cor nem fundo próprios: o visual vem das imagens ou logos que você coloca dentro.
Você pode estar procurando isto se pediu algo assim
- fotos girando em círculo no meio da página
- logos dos clientes rodando em volta de um ponto
- galeria em roda que para quando passo o mouse
- ícones orbitando, tipo roda-gigante
- mostrar a equipe com as fotos girando em círculo
- algo diferente de carrossel para exibir produtos
- círculo de imagens girando devagar no topo do site
Também chamado de
- galeria circular
- roda-gigante de imagens
- imagens orbitando
- orbit animation
- roda de logos
- rotating gallery
- galeria giratória
Quando usar
- Seção de clientes ou parceiros com os logos girando
- Apresentação de equipe com fotos pequenas em roda
- Vitrine de produtos ou de ícones de integrações num hero
- Página de portfólio que pede um destaque fora do padrão de grade
Quando evitar
- Muitos itens ou itens grandes, que se sobrepõem num raio pequeno
- Conteúdo que a pessoa precisa ler ou clicar com calma, já que tudo se move sem parar
Como pedir para a sua IA
Crie uma galeria circular com os logos dos clientes girando em volta do centro, cada um de pé, com pausa ao passar o mouse, raio menor no celular, espaço reservado para o círculo no layout e versão parada para quem prefere movimento reduzido.
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 Guirlanda
Por que Guirlanda não ocupa espaço na página?
Porque o elemento raiz de Guirlanda tem tamanho zero e serve só como centro do círculo; os itens giram em volta dele em posição absoluta. Coloque o componente centralizado num contêiner com largura e altura suficientes para o diâmetro mais o tamanho dos itens, como faz a demonstração.
Guirlanda funciona no celular?
Funciona, porque a rotação de Guirlanda é uma animação CSS de transformação, leve para o aparelho. Em telas estreitas, reduza o raio para o círculo caber: a demonstração usa 80 pixels no celular, em vez de 120 no desktop. A pausa no hover foi pensada para o mouse.
Guirlanda respeita quem prefere menos movimento?
O componente original gira sempre e não lê essa preferência. O prompt do THM Componentes pede à IA uma versão estática para quem ativa a redução de movimento no sistema; em Guirlanda, basta pausar a animação CSS e manter os itens parados na roda.
