# Cosmonauta Estrelas que saem do centro da tela e correm para as bordas com rastro de luz, como uma nave acelerando. > Cosmonauta é um fundo animado do THM Componentes que simula uma viagem pelo espaço: estrelas surgem na região central e avançam para as bordas deixando rastros de luz, como na entrada em velocidade de dobra. Usa Canvas 2D, sem WebGL, e funciona bem em heros escuros, páginas de captação e seções de manifesto. - Categoria: Fundos e atmosferas - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Médio: canvas ou animação contínua; bom para uma seção - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, Canvas 2D - Interação: Nenhuma: o efeito roda sozinho - URL: https://vibecode.thmtecnologia.com/componentes/cosmonauta/ ## Como ele é Imagine olhar pela janela de uma nave que acelera no espaço. Pontos de luz aparecem pequenos na região central, crescem e correm em linha reta até as bordas, cada um puxando um rastro com brilho suave em volta. São 200 estrelas por padrão, em velocidades diferentes, num fluxo que não para. A cor é uma só, branca por padrão, e o canvas é transparente: a cor de fundo vem da classe que você aplica. Na demo, o modo claro usa fundo branco com estrelas cinza e o escuro, fundo preto com estrelas brancas. O canvas ocupa toda a área do elemento pai, e o conteúdo vai por cima. ## Você pode estar procurando isto se pediu algo assim - “fundo de estrelas vindo na minha direção, tipo viagem no espaço” - “aquele efeito de nave entrando na velocidade da luz” - “estrelas passando rápido atrás do título do site” - “fundo escuro com riscos de luz saindo do centro da tela” - “algo com clima de espaço para o topo da página de lançamento” - “salto para o hiperespaço tipo Star Wars como fundo do hero” - “fundo animado de estrelas que não precise de 3D nem WebGL” ## Também chamado de warp speed, hyperspace effect, starfield, campo de estrelas, efeito velocidade da luz, fundo de estrelas animado, estrelas em velocidade de dobra ## Quando usar - Hero escuro de lançamento, evento ou produto com tema de futuro - Página de captação que precisa de movimento sem recorrer a WebGL - Seção de manifesto ou de visão da empresa, com uma frase curta e grande - Tela de boas-vindas ou de espera em apps com tema espacial ## Quando evitar - Áreas de leitura longa, porque o fluxo constante puxa o olhar - Público sensível a movimento, se a versão estática pedida no prompt não for feita - Layouts claros e minimalistas, em que a sensação de velocidade destoa ## Como pedir para a sua IA ```text Crie um fundo animado de campo de estrelas em Canvas 2D com efeito de velocidade de dobra no hero: estrelas saindo do centro para as bordas com rastro brilhante na cor da minha marca, pausa quando sair da tela e versão estática 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 Cosmonauta ### Cosmonauta mostra estrelas caindo do céu? Não exatamente. Em Cosmonauta, as estrelas não caem na diagonal: elas avançam do centro para as bordas, como se a câmera voasse pelo espaço. Se a ideia é uma chuva de meteoros cruzando a tela, a opção mais próxima é Bólido, também do THM Componentes. ### Dá para usar Cosmonauta no modo claro? Sim. O canvas de Cosmonauta é transparente, então o fundo vem da classe que você passa, e a cor das estrelas vem da prop color, em hexadecimal. A demo usa fundo branco com estrelas cinza no modo claro e fundo preto com estrelas brancas no escuro. ### Cosmonauta pesa no celular? Cosmonauta tem a classificação Médio no THM Componentes: redesenha 200 estrelas a cada quadro em Canvas 2D e não pausa por conta própria fora da tela. O prompt orienta a IA a carregar sob demanda, envolver em ClientOnly no Nuxt e comparar LCP e INP; em aparelhos fracos, reduza a prop count. ## Componentes relacionados - [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. - [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. - [Asfalto](https://vibecode.thmtecnologia.com/componentes/asfalto/): Uma estrada noturna com rastros de faróis passando em alta velocidade, que acelera quando você segura o clique. - [Paina](https://vibecode.thmtecnologia.com/componentes/paina/): Flocos de neve caindo devagar pelo fundo da página, com leve desvio para os lados, para campanhas de inverno. - [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. --- 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.