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
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.
