# Firmamento Céu noturno com estrelas de três tamanhos subindo devagar e se deslocando de leve quando o mouse passa. > Firmamento é um fundo de céu estrelado do THM Componentes feito só com CSS e animação em Vue: três camadas de estrelas sobem devagar em velocidades diferentes, e o conjunto se desloca de leve na direção oposta ao mouse, criando profundidade. Leve, funciona bem em seções sobre espaço, futuro e visão de produto. - Categoria: Fundos e atmosferas - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, Motion for Vue - Interação: Mouse - URL: https://vibecode.thmtecnologia.com/componentes/firmamento/ ## 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 ```text 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. ## Componentes relacionados - [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. - [Bólido](https://vibecode.thmtecnologia.com/componentes/bolido/): Pequenos riscos com cauda atravessam o card na diagonal, como estrelas cadentes, cada um no seu ritmo. - [Chispa](https://vibecode.thmtecnologia.com/componentes/chispa/): Pontinhos de luz que piscam e sobem devagar, como purpurina no ar, atrás de um título ou de toda a seção. - [Réstia](https://vibecode.thmtecnologia.com/componentes/restia/): Pontinhos que flutuam devagar pelo fundo e deslizam de leve na direção do mouse, como poeira no ar. - [Boreal](https://vibecode.thmtecnologia.com/componentes/boreal/): Céu noturno com cortinas de luz verde e ciano que ondulam sobre estrelas e uma cadeia de montanhas. --- 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.