# Alvoroço Milhares de partículas coloridas e brilhantes giram em enxame em volta de um ponto que segue o mouse. > Alvoroço é um fundo 3D do THM Componentes em que milhares de partículas coloridas giram em redemoinho em volta de um ponto que segue o mouse ou o dedo. Com Three.js e brilho de pós-processamento, cria aberturas imersivas para páginas de conceito, keynotes na web e lançamentos com fundo escuro. - Categoria: Fundos e atmosferas - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Pesado: WebGL ou simulação; um por página, carregado sob demanda - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, WebGL, postprocessing, Three.js - Interação: Mouse, Toque - URL: https://vibecode.thmtecnologia.com/componentes/alvoroco/ ## 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 ```text 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. ## Componentes relacionados - [Vaga-lume](https://vibecode.thmtecnologia.com/componentes/vaga-lume/): Centenas de pontinhos neon em azul, violeta e magenta fluindo em correntes curvas sobre um fundo escuro. - [Piracema](https://vibecode.thmtecnologia.com/componentes/piracema/): Centenas de setas finas voam juntas como um bando de pássaros e se espalham quando o cursor chega perto. - [Limalha](https://vibecode.thmtecnologia.com/componentes/limalha/): Centenas de milhares de grãos finos correm em filamentos, como tinta no papel, e giram em volta do cursor. - [Réstia](https://vibecode.thmtecnologia.com/componentes/restia/): Pontinhos que flutuam devagar pelo fundo e deslizam de leve na direção do mouse, como poeira no ar. - [Fronteira](https://vibecode.thmtecnologia.com/componentes/fronteira/): Um portal de ficção científica com núcleo de luz, anéis, cristais flutuantes e poeira estelar, girando no espaço. --- 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.