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
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.
