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