Como ele é
Imagine uma bola transparente com dezenas de adesivos redondos colados por fora, girando no ar. Os ícones mais próximos ficam maiores e nítidos; os do fundo encolhem e quase somem, o que dá a sensação de profundidade. A direção do giro acompanha a posição do mouse em relação ao centro, e a velocidade cresce quanto mais longe ele estiver; com o cursor bem no meio, a esfera para. Ao clicar num ícone, a esfera roda suavemente até ele ficar de frente. Segurar e arrastar também gira a bola. A área é um quadrado de 300 pixels com fundo transparente.
Você pode estar procurando isto se pediu algo assim
- bola de logos das tecnologias que eu uso girando
- nuvem 3D de ícones para a seção de stack do portfólio
- mostrar as integrações do meu app num globo de ícones
- esfera de logos de parceiros que gira com o mouse
- aquele efeito de ícones flutuando em 3D, tipo nuvem de tags
- ícones das ferramentas girando em volta, para o currículo online
Também chamado de
- nuvem de ícones
- icon cloud
- nuvem de tags 3D
- 3D tag cloud
- esfera de logos
- logo sphere
- tech stack sphere
Quando usar
- Seção de stack de tecnologias em portfólio ou currículo online
- Página de integrações de um SaaS, com os logos parceiros
- Bloco de parceiros, clientes ou ferramentas com muitos logos
- Página de comunidade ou de eventos com ícones de temas
Quando evitar
- Quando o nome de cada logo precisa ser lido: no canvas, os ícones não têm texto acessível
- Áreas grandes, sem aumentar a resolução do canvas, que é de 300 pixels
- Público que usa só o toque: arrastar com o dedo não gira a esfera no código original
Como pedir para a sua IA
Crie uma nuvem 3D de ícones em canvas para a seção de tecnologias: os logos giram numa esfera, seguem o mouse e o ícone clicado vem para a frente. Quero suporte a toque, pausa fora da tela e versão estática 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 Icon Cloud
Posso usar os logos das minhas ferramentas no Icon Cloud?
Pode. O Icon Cloud recebe uma lista de URLs de imagem na prop images e recorta cada uma num círculo de 40 pixels. Como as imagens são desenhadas num canvas, precisam vir do mesmo domínio ou de um servidor com CORS liberado. A demonstração usa 30 ícones em SVG.
O Icon Cloud funciona no celular?
Em parte. O Icon Cloud usa só eventos de mouse: no celular, tocar num ícone ainda o traz para a frente, porque o navegador converte o toque em clique, mas arrastar com o dedo não gira a esfera. Para uma experiência completa no toque, peça à IA que acrescente eventos de ponteiro.
O Icon Cloud respeita quem prefere menos movimento?
O componente original gira sempre que o cursor está fora do centro. O prompt do THM Componentes pede à IA uma versão estática para quem reduz movimento no sistema, o que no Icon Cloud é simples: desenhar a esfera uma vez e girar só quando a pessoa clica ou arrasta.
