# Boreal Céu noturno com cortinas de luz verde e ciano que ondulam sobre estrelas e uma cadeia de montanhas. > Boreal é um componente exclusivo do THM Componentes que desenha uma aurora boreal com volume num shader WebGL: cortinas de luz verde e ciano ondulam sobre um céu estrelado, atrás de três camadas de montanhas, com paralaxe sutil ao mover o mouse. Serve para heros noturnos, lançamentos e seções de destaque. - Categoria: Fundos e atmosferas - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Pesado: WebGL ou simulação; um por página, carregado sob demanda - Tecnologia: Vue 3, TypeScript, WebGL - Interação: Mouse - URL: https://vibecode.thmtecnologia.com/componentes/boreal/ ## Como ele é Lembra uma noite de inverno no extremo norte vista de um vale. O céu azul-marinho tem estrelas que piscam em ritmos diferentes e, logo acima do horizonte, cortinas finas de luz nascem verdes, ficam ciano no alto e se apagam conforme sobem, ondulando devagar, com colunas verticais e trechos vazios entre elas. Três camadas de montanhas recortam o horizonte, com as cristas tocadas pela luz. Ao mover o mouse, estrelas, cortinas e montanhas se deslocam em profundidades diferentes. O painel é sempre escuro, com vinheta nas bordas, preenche o elemento pai e deixa o conteúdo por cima. ## Você pode estar procurando isto se pediu algo assim - “um fundo de céu noturno com aurora boreal se mexendo” - “aquelas luzes verdes do norte no topo do site, com montanhas” - “fundo escuro com estrelas piscando e luz verde ondulando” - “paisagem noturna animada para a abertura de um lançamento” - “tipo foto de aurora na Islândia, só que em movimento” - “fundo com profundidade que se desloca quando mexo o mouse” - “hero com clima de noite estrelada para uma marca premium” ## Também chamado de aurora boreal, northern lights shader, aurora borealis background, céu noturno animado, night sky background, fundo com estrelas e montanhas, aurora volumétrica ## Quando usar - Hero noturno de marca, produto ou evento que pede alto impacto - Seção de lançamento com um título curto sobre o céu - Fundo de um depoimento especial ou de uma frase de manifesto - Páginas de turismo, viagens de inverno ou experiências ao ar livre ## Quando evitar - Sites claros, porque o painel é sempre escuro e não tem versão para modo claro - Páginas que já rodam outro efeito pesado em WebGL - Áreas com texto longo, em que as cortinas competem com a leitura ## Como pedir para a sua IA ```text Crie um fundo de aurora boreal em shader WebGL para o hero da página inicial: cortinas de luz nas cores da minha marca sobre céu estrelado e montanhas, paralaxe leve com o mouse, pausa fora da tela, quadro fixo para movimento reduzido e fallback estático no Nuxt. ``` Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar. ## Perguntas sobre Boreal ### Boreal funciona no celular? Funciona em aparelhos com WebGL. Boreal limita a densidade de pixels a 2 e a reduz automaticamente quando os quadros ficam lentos, o que ajuda em celulares mais fracos. A paralaxe depende do cursor; no toque, as cortinas seguem ondulando sozinhas. Por ser um efeito Pesado no THM Componentes, o prompt pede carregamento sob demanda. ### Dá para trocar o verde da aurora por outras cores? Sim. Boreal recebe duas cores: color1 pinta a base das cortinas e color2, o topo. A documentação sugere roxo e índigo para uma variante violeta, e o prompt do THM Componentes orienta a IA a usar os tokens de cor do seu projeto. Também dá para ajustar a intensidade, a densidade de estrelas e desligar as montanhas. ### Boreal respeita quem prefere menos movimento? Sim. Quando o sistema pede menos movimento, Boreal mostra um quadro fixo: as cortinas e o brilho das estrelas param, e só a paralaxe do cursor continua respondendo. O componente também pausa quando sai da tela, então deixa de desenhar enquanto a pessoa lê outras seções. ## Componentes relacionados - [Névoa](https://vibecode.thmtecnologia.com/componentes/nevoa/): Fundo animado em CSS com faixas de luz azul e violeta que deslizam devagar, como uma aurora boreal. - [Firmamento](https://vibecode.thmtecnologia.com/componentes/firmamento/): Céu noturno com estrelas de três tamanhos subindo devagar e se deslocando de leve quando o mouse passa. - [Cosmonauta](https://vibecode.thmtecnologia.com/componentes/cosmonauta/): Estrelas que saem do centro da tela e correm para as bordas com rastro de luz, como uma nave acelerando. - [Clarão](https://vibecode.thmtecnologia.com/componentes/clarao/): Nuvens escuras de tempestade iluminadas por dentro por raios azuis, dourados e brancos que vêm e vão. - [Lusco-fusco](https://vibecode.thmtecnologia.com/componentes/lusco-fusco/): Manchas de índigo, ciano e lavanda que se misturam e derivam devagar, com um grão leve de filme. --- 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.