Como ele é
Imagine um enxame de vaga-lumes de neon em volta de uma lâmpada. Sobre fundo preto, 2000 bastõezinhos coloridos, cada um de uma cor sorteada, voam em direção a um ponto, passam direto, fazem a curva e voltam, sempre apontando para onde vão. Onde muitos se juntam, o brilho forma um núcleo quase branco; nas beiradas sobram riscos rosa, verdes, azuis e amarelos. Quando o mouse ou o dedo se move, a nuvem inteira persegue o ponteiro com certo atraso e se enrola no novo lugar. O conteúdo fica por cima, e uma prop opcional desfoca o fundo.
Você pode estar procurando isto se pediu algo assim
- partículas coloridas girando atrás do título que seguem o mouse
- fundo com enxame de luzinhas neon em volta do cursor
- aquele redemoinho de partículas 3D para abertura de keynote
- fundo imersivo escuro para a página de conceito do produto
- uma galáxia de confete brilhante que mexe com o dedo no celular
- algo que pareça um enxame de vaga-lumes no topo do site
Também chamado de
- particle swarm
- redemoinho de partículas
- particle vortex
- enxame de partículas
- Three.js particles
- fundo de partículas 3D
- bloom particles
Quando usar
- Abertura imersiva de evento, keynote ou lançamento
- Página de conceito ou de manifesto de um produto de tecnologia
- Hero escuro com título curto e grande, em que o movimento é o destaque
- Portfólio criativo que quer mostrar interação logo de cara
Quando evitar
- Marcas com paleta contida, sem trocar as cores sorteadas pelas cores da marca
- Páginas que já têm outro efeito em WebGL
- Público que acessa principalmente por celulares antigos
Como pedir para a sua IA
Crie um fundo 3D com Three.js em que um enxame de partículas brilhantes gira em redemoinho em volta do cursor no hero: cores da minha paleta em vez de sorteadas, menos partículas no celular, pausa fora da tela e versão estática para movimento reduzido.
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 Alvoroço
Alvoroço funciona com o dedo no celular?
Funciona. Alvoroço escuta o movimento do mouse e o arrasto do dedo sobre a área do componente, e o enxame passa a girar em volta do ponto tocado. Como o efeito é Pesado no THM Componentes, vale reduzir a prop particleCount no celular; a demo também mostra uma versão com 500 partículas.
Dá para usar as cores da minha marca em Alvoroço?
Dá, com um ajuste. No código original, Alvoroço sorteia uma cor aleatória para cada partícula. O prompt do THM Componentes pede à IA que use os tokens de cor do projeto, o que significa trocar o sorteio por uma paleta sua, mantendo o brilho que dá o efeito.
Alvoroço deixa a página pesada?
Alvoroço tem a classificação Pesado no THM Componentes: usa Three.js, 2000 partículas por padrão e uma etapa de brilho em pós-processamento, e a animação não para sozinha fora da tela. O prompt orienta a IA a carregar sob demanda, pausar fora da viewport e manter um só efeito WebGL pesado por página.
