Como ele é
É como olhar o céu de uma noite limpa, longe da cidade. Sobre um fundo preto que clareia num cinza bem escuro perto da base, 1.000 estrelas pequenas, 400 médias e 200 maiores, todas brancas, sobem devagar: as menores andam mais rápido e as maiores mais devagar, o que dá profundidade. Quando o mouse se move, o céu inteiro desliza um pouco para o lado oposto e para com suavidade, como se tivesse mola. Em telas de toque, o que se vê é a subida lenta. A cor das estrelas é configurável, e o conteúdo que você coloca dentro aparece por cima do céu.
Você pode estar procurando isto se pediu algo assim
- fundo de céu estrelado para o site, sem parecer pesado
- estrelinhas subindo devagar no fundo escuro da página
- céu noturno que mexe um pouco quando passo o mouse
- fundo de espaço para uma seção sobre o futuro da empresa
- efeito de profundidade com estrelas em camadas, tipo parallax
- algo bonito e discreto com estrelas para a tela de login
Também chamado de
- starfield
- céu estrelado
- céu noturno animado
- parallax stars
- fundo de estrelas
- night sky background
- estrelas em parallax
Quando usar
- Seção sobre visão de futuro, missão ou inovação
- Hero escuro de produto com tema de espaço ou astronomia
- Tela de login ou de espera que pede um fundo calmo
- Páginas em que um fundo em WebGL seria exagero
Quando evitar
- Layouts claros, porque o céu é escuro por padrão
- Áreas com muito texto pequeno, em que as estrelas disputam com as letras
Como pedir para a sua IA
Crie um fundo de céu estrelado só com CSS na seção de visão da empresa: três camadas de estrelas subindo em velocidades diferentes, parallax suave com o mouse, cores do meu tema e versão parada para quem prefere menos movimento.
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 Firmamento
Firmamento usa canvas ou WebGL?
Não. Firmamento desenha as estrelas com sombras de CSS em três camadas e anima tudo com a biblioteca de animação que o prompt instala, sem canvas nem WebGL. Por isso tem a classificação Leve no THM Componentes e serve bem em páginas que precisam carregar rápido.
Firmamento funciona no celular?
Funciona. Em Firmamento, a subida das estrelas roda em qualquer tela; o deslocamento em parallax depende do movimento do mouse, então no celular ele quase não aparece. A prop speed define a duração do ciclo da camada mais rápida, 50 segundos por padrão, e factor controla a força do parallax.
Dá para trocar a cor das estrelas e do fundo de Firmamento?
Sim. A cor das estrelas vem da prop starColor, que aceita qualquer cor CSS. O fundo de Firmamento é um degradê do cinza-escuro ao preto definido na classe do componente, e o prompt do THM Componentes orienta a IA a trocar esses valores pelos tokens de cor do seu projeto.
