# Vortex Background Centenas de pontinhos neon em azul, violeta e magenta fluindo em correntes curvas sobre um fundo escuro. > O Vortex Background é um fundo animado do THM Componentes em que centenas de partículas neon nascem numa faixa no meio da área e fluem em correntes curvas, guiadas por ruído, com um brilho difuso em volta. Feito em canvas 2D, tem cores, quantidade, velocidade e espessura ajustáveis e funciona bem atrás de chamadas para ação e heros escuros. - Categoria: Fundos e atmosferas - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Médio: canvas ou animação contínua; bom para uma seção - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, Canvas 2D, simplex-noise - Interação: Nenhuma: o efeito roda sozinho - URL: https://vibecode.thmtecnologia.com/componentes/vortex/ ## 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 ```text 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. ## Componentes relacionados - [Flow Field](https://vibecode.thmtecnologia.com/componentes/flow-field/): Milhares de linhas finas correm em correntes curvas, como fios de seda ao vento, sobre um fundo claro. - [Particles Background](https://vibecode.thmtecnologia.com/componentes/particles-bg/): Pontinhos que flutuam devagar pelo fundo e deslizam de leve na direção do mouse, como poeira no ar. - [Particle Whirlpool](https://vibecode.thmtecnologia.com/componentes/particle-whirlpool-bg/): Milhares de partículas coloridas e brilhantes giram em enxame em volta de um ponto que segue o mouse. - [Wavy Background](https://vibecode.thmtecnologia.com/componentes/wavy-background/): Cinco ondas de luz neon, grossas e desfocadas, ondulando sem parar no meio de um fundo escuro. - [GPU Particles](https://vibecode.thmtecnologia.com/componentes/gpu-particles/): Centenas de milhares de grãos finos correm em filamentos, como tinta no papel, e giram em volta do 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.