# Icon Cloud Bola de ícones redondos girando em 3D, que segue o mouse e traz para a frente o ícone clicado. > O Icon Cloud é um componente do THM Componentes que espalha ícones ou logos redondos sobre uma esfera 3D desenhada em canvas, girando sem parar. A direção e a velocidade seguem a posição do mouse, arrastar gira a esfera e clicar num ícone o traz para a frente. Serve para mostrar stack de tecnologias, integrações ou parceiros. - Categoria: 3D e espaço - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Médio: canvas ou animação contínua; bom para uma seção - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, Canvas 2D - Interação: Mouse, Toque - URL: https://vibecode.thmtecnologia.com/componentes/icon-cloud/ ## 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 ```text 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. ## Componentes relacionados - [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. - [Marquee](https://vibecode.thmtecnologia.com/componentes/marquee/): Uma fileira de logos, depoimentos ou etiquetas que desliza em loop contínuo, na horizontal ou na vertical. - [Orbit](https://vibecode.thmtecnologia.com/componentes/orbit/): Ícones ou pequenos elementos que giram em círculos ao redor de um centro, como planetas em volta do Sol. - [Gravity Tags](https://vibecode.thmtecnologia.com/componentes/gravity-tags/): Pílulas com nomes de serviços despencam na tela, batem umas nas outras e empilham; dá para arrastar e jogar. - [Globe](https://vibecode.thmtecnologia.com/componentes/globe/): Globo claro de pontinhos com marcadores laranja em grandes cidades, girando devagar e fácil de arrastar. --- 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.