# Thunderstorm Background Nuvens escuras de tempestade iluminadas por dentro por raios azuis, dourados e brancos que vêm e vão. > O Thunderstorm Background é um fundo em shader do THM Componentes que simula uma tempestade vista de perto: nuvens cinza-escuras iluminadas por dentro por descargas ramificadas em azul, dourado e branco, que se arrastam pela tela, somem e voltam. Roda em WebGL2 e combina com campanhas de impacto, lançamentos e marcas ligadas a energia. - 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, OGL - Interação: Nenhuma: o efeito roda sozinho - URL: https://vibecode.thmtecnologia.com/componentes/thunderstorm-background/ ## Como ele é Imagine estar dentro de uma nuvem de tempestade à noite. O fundo é um céu cinza-escuro com textura de fumaça, e três focos de luz, um azul, um dourado e um branco, passeiam pela cena e se abrem em veios finos e ramificados, como raios correndo por dentro das nuvens. Os focos se movem sem parar, cruzam a tela e às vezes saem dela, então momentos quase escuros se alternam com clarões. O brilho é suave, sem branco estourado. A animação segue sozinha, sem reagir ao mouse, e o fundo ocupa toda a área do elemento pai. ## Você pode estar procurando isto se pediu algo assim - “fundo de tempestade com raios para página de lançamento” - “aquele céu escuro com relâmpagos piscando atrás do título” - “fundo com energia elétrica para marca de energia ou de bebida energética” - “nuvens escuras com raios azuis e dourados no topo do site” - “efeito de trovoada para uma campanha com clima intenso” - “fundo dramático com eletricidade correndo pelas nuvens” ## Também chamado de thunderstorm background, fundo de tempestade, lightning shader, raios animados, storm clouds background, fundo de relâmpagos, electric clouds ## Quando usar - Campanha de impacto ou contagem regressiva para lançamento - Marca de energia, de tecnologia elétrica ou de esporte radical - Hero escuro de evento, show ou game com clima dramático - Seção curta com título forte e pouco texto ## Quando evitar - Público sensível a clarões, se a versão estática pedida no prompt não for feita - Páginas que já usam outro efeito em WebGL - Marcas de tom calmo, como saúde e bem-estar, em que o clima de tempestade destoa ## Como pedir para a sua IA ```text Crie um fundo em shader GLSL de tempestade no hero da campanha: nuvens escuras com raios ramificados nas cores da minha marca, clarões suaves sem piscar rápido, pausa fora da tela, versão estática para movimento reduzido e imagem de reserva sem WebGL2. ``` 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 Thunderstorm Background ### O Thunderstorm Background pisca muito forte? Não há flashes instantâneos: no Thunderstorm Background, os raios se acendem e se apagam com o movimento contínuo de três focos de luz, e o brilho máximo fica abaixo do branco puro. Ainda assim, há alternância de claro e escuro, e o prompt do THM Componentes pede uma versão estática para quem prefere menos movimento. ### Dá para mudar as cores do Thunderstorm Background? Sim. O Thunderstorm Background aceita hue, que gira o matiz dos raios e das nuvens, saturation e brightness para a intensidade, e speed para acelerar ou acalmar a tempestade. A camada opcional noise acrescenta granulado. O prompt do THM Componentes orienta a IA a partir dos tokens de cor do seu projeto. ### O Thunderstorm Background funciona no celular? Funciona em aparelhos com WebGL2 e já pausa fora da tela, mas é classificado como Pesado no THM Componentes. O Thunderstorm Background não reage ao toque, porém a camada de shader captura o arraste do dedo e impede a rolagem sobre o fundo; peça à IA para desativar os eventos de ponteiro dele. ## Componentes relacionados - [Neural Background](https://vibecode.thmtecnologia.com/componentes/neural-background/): Fios finos de luz azul se ramificam a partir de nós brilhantes sobre fundo preto, como neurônios acesos no escuro. - [Singularity Background](https://vibecode.thmtecnologia.com/componentes/singularity-background/): Um anel de luz laranja e azul gira em volta de um centro escuro, como um buraco negro engolindo poeira cósmica. - [Aurora](https://vibecode.thmtecnologia.com/componentes/aurora/): Céu noturno com cortinas de luz verde e ciano que ondulam sobre estrelas e uma cadeia de montanhas. - [Stractium Background](https://vibecode.thmtecnologia.com/componentes/stractium-background/): Uma escultura abstrata de camadas finas flutua e se retorce num céu claro, iluminada por um sol. - [Meteors](https://vibecode.thmtecnologia.com/componentes/meteors/): Pequenos riscos com cauda atravessam o card na diagonal, como estrelas cadentes, cada um no seu ritmo. --- 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.