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
- globo de ícones
- 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 Ouriço
Posso usar os logos das minhas ferramentas em Ouriço?
Pode. Ouriço 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.
Ouriço funciona no celular?
Em parte. Ouriço 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.
Ouriço 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 em Ouriço é simples: desenhar a esfera uma vez e girar só quando a pessoa clica ou arrasta.
