Apresentando "Orbit of Night", um relógio web para dar aquela "viajada no espaço".

Olá!

Quero apresentar um projeto paralelo que fiz desde esta manhã com IA usando "vibe coding": o belo relógio com papel de parede espacial Orbit of Night (Órbita da Noite).
Era apenas uma página dentro de uma funcionalidade web que eu estava criando, mas achei um desperdício deixá-la só como uma página isolada, então comecei a desenvolvê-la como algo próprio, com o objetivo de proporcionar uma experiência que desse vontade de parar e ficar olhando por um momento.

Principais recursos

• Papel de parede vivo: fundo com estrelas, nebulosas e meteoros em movimento contínuo
• Rastreamento da ISS em tempo real: órbita em curva senoidal que se move de forma estável na tela, corrigida com base em dados reais de posição da ISS
• Elementos interativos: clique nos planetas para fazer um escaneamento virtual, além de pequenos extras divertidos como UFO e efeitos de buraco negro
• Configurações do usuário: é possível ativar e desativar elementos como planetas, UFO e ISS conforme a preferência, com 3 temas disponíveis
  Foi implementado sem frameworks, apenas com JavaScript puro e animações em CSS (foi a IA que implementou, mas ao revisar ouvi dela que eu era exigente demais?), e em especial a órbita da ISS foi criada com uma abordagem híbrida que combina simulação estável com correção em tempo real baseada em dados.

TMI: a história de um quarentão que desenvolveu junto com IA

Na verdade, hoje sou um pai de filhos e filhas já na casa dos 40.
Para me apresentar rapidamente, sou de uma geração que teve contato desde jogos antigos baseados em texto e MUD, e também sou um gamer com muito carinho por jogos web.
Embora eu tenha me formado em Ciência da Computação e trabalhado na área de TI, sempre estive mais próximo da engenharia de servidores, então acabei aprendendo a lidar um pouco com middleware, backend e frontend também, como um trabalhador comum de escritório.
Mas eu sempre tive o sonho de fazer jogos, e depois de experimentar a evolução do desempenho da IA pensei: "agora chegou a hora!". Desde outubro do ano passado, venho usando meu tempo livre para fazer o que hoje se chama de vibe coding com IA.

Atualmente estou no meu terceiro projeto toy de webgame, e no meio dele havia uma tela feita com mais capricho, criada de forma meio espontânea enquanto eu montava uma página de funcionalidade. Em certo momento pensei que seria um desperdício usá-la só ali. Foi assim que este projeto nasceu.

Que tal visitar e dar uma "viajada no espaço" por um instante?
Feedback é sempre bem-vindo!

[windbug99]

É um projeto incrível.

[ifmkl]

Obrigado pelo interesse!

[qnth159]

Que legal!

[ifmkl]

Obrigado pelo carinho e interesse!

[yunheenet]

Fica ótimo como papel de parede do navegador! É parecido com a sensação de ter o espaço como papel de parede no iPhone.

[ifmkl]

Muito obrigado pelo interesse e carinho! Eu pretendo deixar aberto em um tablet mais antigo que está sem uso em casa, colocar uma moldura simples e usar como relógio haha!

[codemasterkimc]

Ótimo~
Acho que seria ainda melhor se os planetas também fossem aprimorados com base nisto
https://codepen.io/jamesfinn180/pen/VwzENbR

[ifmkl]

Uau! Realmente existem muitas pessoas incríveis no mundo. Obrigado pelo interesse. Como é a sensação de observar a partir da Terra, talvez a Terra não apareça exatamente assim, mas vou tentar aplicar isso e encarar um upgrade!

[thfvkfk]

Foi realmente muito reconfortante e me deixou feliz.
Obrigado por criar uma obra tão boa. :)

[ifmkl]

Muito obrigado pela resposta tão gentil T_T Isso me dá ainda mais força.

[ifmkl]

Refleti as opiniões que vocês compartilharam e já fiz as alterações! 1. Os planetas passam a ter informações fixas quando são gerados. 2. A opção de chuva de meteoros pode ser alterada nas configurações de acordo com a preferência de cada um. (frequência, velocidade, quantidade) 3. A nebulosa, a Via Láctea — embora seja pouco perceptível — e o brilho das estrelas foram ajustados. 4. Agora, ao desativar a opção de buraco negro, ele não funciona mais. 5. Adicionei um efeito em homenagem parecido com o warp de St×r W×rs. 6. De vez em quando, aparecem uns amigos peculiares sobre os planetas. Muito obrigado a todos pelo grande interesse!

[pscsudal]

É algo pequeno, mas mesmo desativando o efeito de buraco negro, o efeito de buraco negro continua funcionando. ^^ Que projeto legal~!

[ifmkl]

Sim, obrigado ^^ Pretendo aplicar em breve uma versão melhorada, refletindo esses bugs e as opiniões de outras pessoas. Agradeço pelo interesse!

[mido01111]

Parece parecido com o design que vi antes em algum site de pomodoro. E se aparecessem vários planetas?

[ifmkl]

Ah, como eu imaginava, dizem mesmo que não há nada de novo sob este céu e neste mundo...! Estou pensando em deixar aparecer apenas 1 planeta e adicionar diversão com elementos únicos surgindo sobre ele, mas também vou testar a opção de vários planetas aparecerem. Obrigado.

[aliveornot]

Eu também vi que era para ficar viajando e esperava algo como fotos reais do espaço com longa exposição... mas acho que foi bem diferente do que eu esperava.

[ifmkl]

Muito obrigado pela opinião valiosa. Vamos pensar melhor nessa parte também com a ajuda da IA! haha Mas, como o conceito está definido para tentar expressar tudo ao máximo usando css ou svg, vou me inspirar olhando fotos relacionadas!

[kissdesty]

Seria ótimo se aparecesse um espaço um pouco mais estático e com uma sensação mais realista~

[ifmkl]

Vamos expandir para que seja possível escolher entre vários tipos de universo, além dos temas de cores. Agradecemos muito sua opinião valiosa!

[hoonix]

Obrigado por apresentar um projeto tão significativo. É admirável e inspirador ver que você continua desafiando a si mesmo sem perder seus sonhos mesmo com o passar do tempo. Acho que seus filhos também vão gostar! Para dar alguns feedbacks: 1) A chuva de meteoros cai rápido e em grande quantidade, então talvez fique animada demais para simplesmente ficar contemplando, sabe? Se caísse de forma mais suave, com menos frequência e mais devagar, acho que daria para criar uma atmosfera mais tranquila e emotiva. 2) No escaneamento dos planetas, que tal fazer com que, para o mesmo planeta, apareçam sempre as mesmas informações? 3) O efeito de buraco negro nas configurações se refere ao efeito de clique? Mesmo desligando, esse efeito não é desativado. 4) Não entendi muito bem qual cor a opção Random Color nas configurações altera.

[ifmkl]

Obrigado pelo feedback. Para a chuva de meteoros, estou considerando uma opção de ajustar a frequência por meio de um slider. A parte em que os planetas mostram informações diferentes a cada clique também é algo a ser corrigido T_T ahh. Random Color é uma opção para fazer com que a cor do planeta exibido saia aleatoriamente a cada vez. Como o próprio planeta se move lentamente, se quiserem conferir isso, podem desligar e ligar novamente a opção Planet logo acima, e aí dá para ver que aparece um planeta de cor diferente hehe. No caso do buraco negro, eu originalmente queria criar um efeito em que as estrelas ao redor e a nave espacial fossem puxadas para dentro quando clicados, mas isso não era nada simples de fazer só com navegador e JavaScript, então implementei apenas a sensação de que partículas separadas estão sendo puxadas TT. O fato de não desligar quando está em off também está previsto para correção. Muito obrigado pelas opiniões valiosas!