# Pipoca Um monte de bolas e cubos foscos que se apertam no centro e abrem caminho quando o mouse passa. > Pipoca é um componente exclusivo do THM Componentes que monta, em Three.js, um aglomerado de esferas e cubos arredondados presos ao centro por física própria. O cursor abre caminho entre as peças, o clique as espalha e a atração as reagrupa. Com luz de estúdio e sombras suaves, funciona em heros de tecnologia e seções de serviços. - Categoria: 3D e espaço - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Pesado: WebGL ou simulação; um por página, carregado sob demanda - Tecnologia: Vue 3, TypeScript, WebGL, Three.js - Interação: Mouse, Toque - URL: https://vibecode.thmtecnologia.com/componentes/pipoca/ ## Como ele é Parece um punhado de bolinhas e cubos de cantos arredondados, de borracha fosca, sob luz de estúdio. Ao carregar, as peças caem de todos os lados e se apertam numa bola que gira devagar, como um redemoinho lento. A maioria é branca ou cinza-clara, cerca de 30% são índigo e ciano e umas poucas são azul-marinho. Quando o mouse passa, um dedo invisível abre um buraco no aglomerado, e as peças se acomodam rolando umas sobre as outras. Um clique espalha tudo, e a atração junta de novo. Sombras suaves aparecem entre as peças e no chão, sobre fundo quase branco. ## Você pode estar procurando isto se pediu algo assim - “um monte de bolinhas 3D que se afastam quando passo o mouse” - “aglomerado de esferas e cubos que espalha quando clico” - “algo lúdico e sofisticado para o topo do site de tecnologia” - “bolas coloridas com física que reagem ao cursor, tipo brinquedo” - “hero 3D com peças foscas e sombra suave, estilo estúdio” - “efeito de bolinhas se empurrando para a página de serviços” - “piscina de bolinhas em 3D que mexe com o cursor” ## Também chamado de aglomerado 3D, physics cluster, instanced mesh, esferas com física, piscina de bolinhas 3D, 3D ball pit, formas 3D interativas ## Quando usar - Hero de produto digital ou de marca de tecnologia com tom lúdico - Seção de serviços ou de recursos que pede um respiro visual - Abertura de apresentação ou página de lançamento com pouco texto - Portfólio de estúdio de design ou de motion ## Quando evitar - Celulares antigos: a física de colisão e as sombras exigem bastante - Páginas sérias, como saúde ou jurídico, em que o tom de brinquedo destoa - Telas que já rodam outro efeito pesado em WebGL ## Como pedir para a sua IA ```text Crie no hero um aglomerado 3D em Three.js de esferas e cubos arredondados com física de atração e colisão: o cursor abre caminho e o clique espalha as peças. Use as cores da minha marca nos acentos, reduza as sombras em aparelhos lentos e mostre um quadro parado para movimento reduzido. ``` Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar. ## Perguntas sobre Pipoca ### Pipoca pesa no celular? É um efeito Pesado no THM Componentes, mas se ajusta: Pipoca reduz a resolução e desliga as sombras quando os quadros caem, limita a densidade de pixels a 2x e pausa fora da tela ou com a aba escondida. Em aparelhos fracos, diminuir a prop count, que aceita de 8 a 400 peças, alivia a física. ### Dá para usar as cores da minha marca em Pipoca? Sim. Pipoca tem props para a cor base clara, duas cores de acento e o fundo, além da fração de peças coloridas e da rugosidade do material. O prompt do THM Componentes orienta a IA a trocar esses valores pelos tokens de cor do seu projeto. ### Como Pipoca se comporta com movimento reduzido? Quando o sistema pede menos movimento, Pipoca resolve o empacotamento de uma vez e mostra o aglomerado parado, já acomodado. O cursor e o clique deixam de mexer nas peças, então a cena vira uma imagem 3D estática com a mesma luz e as mesmas sombras. ## Componentes relacionados - [Tombo](https://vibecode.thmtecnologia.com/componentes/tombo/): Pílulas com nomes de serviços despencam na tela, batem umas nas outras e empilham; dá para arrastar e jogar. - [Quimera](https://vibecode.thmtecnologia.com/componentes/quimera/): Uma forma líquida em 3D que ondula, se funde com um anel e duas cápsulas e gira conforme o mouse. - [Batuta](https://vibecode.thmtecnologia.com/componentes/batuta/): Milhares de pontinhos que voam e se reorganizam em esfera, anel, cubo e no texto que você escolher. - [Entardecer](https://vibecode.thmtecnologia.com/componentes/entardecer/): Centenas de bolhas em 3D sobem e descem devagar sobre um céu que muda de azul para laranja. - [Orvalho](https://vibecode.thmtecnologia.com/componentes/orvalho/): Gotas brilhantes de cor índigo que se juntam e se separam como líquido, e uma delas segue o cursor. --- 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.