Como ele é
Lembra um enxame de vaga-lumes neon seguindo correntes de vento invisíveis. Por padrão, 700 pontinhos luminosos em azul, violeta e magenta surgem numa faixa horizontal no meio da área e escorrem em trilhas curvas que sobem, descem e fazem arcos como fumaça, cada um acendendo e apagando ao longo da sua vida curta. Um desfoque em volta dos pontos cria o brilho neon sobre o fundo preto. A animação é contínua e não reage ao mouse. O conteúdo colocado dentro fica por cima, centralizado na demo.
Você pode estar procurando isto se pediu algo assim
- fundo preto com partículas neon serpenteando atrás do botão
- pontinhos brilhantes que formam correntes e redemoinhos no fundo
- efeito de energia ou de fumaça luminosa para a seção de compra
- fundo tipo vaga-lumes neon para a chamada final da landing page
- algo chamativo atrás do botão de comprar, tipo galáxia
- partículas coloridas fluindo como correnteza no meio da tela
- fundo escuro animado com luz azul e roxa para lançamento
Também chamado de
- fundo vórtice
- partículas em fluxo
- campo de fluxo
- partículas neon
- vortex background
- flow field particles
- noise particles
Quando usar
- Seção de chamada para ação ou de conversão no fim da landing page
- Hero escuro de produto de tecnologia, jogo ou evento
- Página de lançamento com título curto e botões de compra
- Tela de abertura de app ou de evento online
Quando evitar
- Sites de visual claro, já que o efeito depende do fundo escuro para brilhar
- Páginas que precisam rodar leves em celulares simples, sem reduzir a quantidade de partículas
- Áreas com texto pequeno por cima, em que o brilho atrapalha a leitura
Como pedir para a sua IA
Adicione um fundo de partículas em fluxo com brilho neon em canvas na seção de chamada para ação: correntes de pontos nas cores da minha marca, canvas do tamanho da seção, pausa fora da tela, versão estática para movimento reduzido e menos partículas no celular.
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 Vortex Background
O Vortex Background pesa no celular?
Pode pesar. O Vortex Background move 700 partículas por padrão e, a cada quadro, aplica duas passadas de desfoque sobre o canvas inteiro para criar o brilho neon; esse canvas tem o tamanho da janela, mesmo numa seção menor, e não pausa fora da tela. O prompt do THM Componentes pede carregamento sob demanda e teste de LCP e INP; reduzir particleCount ajuda.
Como mudar as cores do Vortex Background?
As partículas do Vortex Background usam uma faixa de 100 graus de matiz a partir da prop baseHue: o padrão 220 vai do azul ao magenta, e 120 gera tons de verde a azul, como na demo de página inteira. A cor de fundo vem de backgroundColor, preto por padrão. O prompt do THM Componentes pede à IA para alinhar esses valores aos tokens de cor do projeto.
Onde fica o conteúdo no Vortex Background?
O conteúdo vai dentro do Vortex Background, pelo slot, numa camada acima do canvas, e a prop class estiliza essa camada; na demo, título, texto e dois botões ficam centralizados. Como o canvas é desenhado com o tamanho da janela e centralizado, use overflow hidden no contêiner, como a demo faz. Para movimento reduzido, o prompt pede à IA uma versão estática.
