Serviço que mostra o céu atual do seu local aproximado em gradiente CSS

• Utiliza o endereço IP do usuário para estimar as informações de localização atual.
• Visualiza a cor e a atmosfera do céu da localização correspondente em formato de gradiente CSS.
• Sem mapa separado ou entradas complexas, é possível ver o resultado imediatamente apenas acessando o site.
• A interface é simples e leve, então qualquer pessoa pode acessá-la com facilidade.
• Não inclui informações meteorológicas reais; a definição de cor é baseada principalmente no fuso horário da posição e na posição do sol.

---

Visão geral do serviço

• Este web service estima a latitude e longitude aproximadas atuais do usuário por meio do endereço IP ao acessar o site
• A partir da localização estimada e do horário local, calcula a coloração do céu conforme a posição do sol e o fuso horário.
• A cor do céu calculada é renderizada em formato de gradiente CSS no fundo do site para mostrar, em tempo real, a atmosfera do céu.
• Sem necessidade de inserir dados adicionais, o funcionamento é automático ao acessar o site.

Recursos e características

• Não há mapa, API de clima ou cadastro de conta, removendo etapas complexas.
• Visualização em tempo real: a cor do céu muda dinamicamente conforme a variação do fuso horário do local atual.
• Como é implementado apenas com gradiente CSS, oferece uma experiência de usuário rápida e leve.
• Não reflete condições de tempo severo, nuvens ou chuva; o algoritmo aplicado é basicamente centrado no ângulo solar e horário.

Propósito e relevância

• É uma ferramenta de informação visual simples, não tão complexa quanto aplicativos de clima ou serviços de mapa.
• Há alto valor de uso também como obra/arte para web ou projeto de demonstração pessoal.
• Como fornece automaticamente uma pista visual localizada, é ideal para esclarecer rapidamente a curiosidade de 'como estaria o céu aqui agora'.

[GN⁺]

Comentário do Hacker News

• Lembro-me de uma época no início da carreira, quando eu trabalhava em um software de navegação turn-by-turn em 3D e fui responsável por desenhar o céu.

  • O meu líder disse que seria só pintar o céu de azul durante o dia e de cinza escuro à noite, mas, como queria renderizar um céu realista que mudasse com ambiente, latitude, longitude e horário, implementei um modelo de céu realista com base no paper do Preetham[link].

  • As constelações eram obtidas de uma tabela astronômica hardcoded, e o desempenho também foi bem bom.

  • Mas, na gerência, eles se assustaram com efeitos realistas como o horizonte esbranquiçado e com tom amarelado; disseram que “o céu do concorrente é azul”, não gostaram do meu trabalho e minha resposta de “vire-se para fora” não funcionou de jeito nenhum.

  • No fim, acabei apagando tudo e deixando só o retângulo azul.

  • Graças a essa experiência, quando vejo um site assim, acho mesmo muito bom.

  • Foi assim que comecei a perceber a importância de especificação e design.

    • Convenções que são compreendidas de imediato são importantes, e excesso de detalhes visuais só aumenta a confusão.
    • Se o céu aparece difuso ou esbranquiçado em vez de azul, pode ficar em dúvida se é mesmo o céu ou se a página ainda está carregando. Com estrelas acontece o mesmo: à noite, não há propósito funcional.
    • Esse tipo de efeito realista combina com uma visualização planetária real, como no Google Earth. Na prática, pode ser divertido fazer assim, mas para uma vista de navegação, simplicidade e clareza são o mais importante. Em vez de realismo, a usabilidade deve vir primeiro.

• Antes, um colega com quem trabalhei por um tempo me disse que gastou muito tempo implementando o sistema de estrelas com física no jogo Cobalt[link].

  • Se isso atrapalhar a usabilidade, pode ser removido na reta final, mas acredito que esse tipo de detalhe em conjunto eleva a qualidade final e adiciona uma sensação de exploração para quem usa.

• Em casos assim, programar parece mais chato como trabalho do que como hobby.

  • Às vezes aparece a chance de fazer algo legal na empresa, mas, na maioria das vezes, só passa se houver um resultado de pesquisa dizendo que “céu realista aumenta em 0,1% a métrica de OKR”.
  • Mas também existem nichos em que sempre é possível fazer algo divertido, e por isso a indústria de jogos paga mal e é um ambiente de excesso de trabalho, apesar da paixão.

• É um exemplo clássico de gestão ignorando a criatividade de inovadores: um caso típico de administração absurda.

• Fiquei pensando que pelo menos isso poderia ter sido incluído como easter egg.

  • Seria bom ter dito que as pinturas de Vincent Van Gogh já incorporavam com precisão as posições reais das constelações e que, por essa inspiração, tentaram reproduzir a cor realista do céu.

• Estamos lançando um sensor instalado no lado interno da janela. Esse sensor mede a cor do céu em pequenos ângulos de cone e envia o resultado para o skylight e para o window fixture interno, reproduzindo internamente o mesmo brilho do céu[innerscene.com]

  • Até poderia ser implementado com monitor de computador, mas há a limitação de não usar espectro completo em vez de luz RGB, então a luz interna fica inconsistente.
  • Outra limitação do código atual é que variáveis como nuvens, névoa e fumaça não entram nisso, então pode diferir do ambiente externo real (muitos comentários no HN sinalizaram isso).
  • Imagens de satélite em tempo real podem compensar parcialmente, mas não resolvem totalmente a precisão, então acabamos desenvolvendo nosso próprio sensor.
  • Já existem vários sensores de CCT no mercado, mas normalmente eles medem direção + espalhamento + luz refletida e ficam limitados em torno de 7500K; porém o céu real varia até 40 milK.
  • Compartilhamos uma imagem de gráfico de como a cor do céu muda ao longo do dia em medições reais do sensor[image] e informações extras[link].

• Ao ver a menção à tag HTML meta http-equiv="Refresh", deu até risada.

  • Antigamente, se era preciso atualizar a página automaticamente, não tinha outra forma além dessa.

  • Esse projeto me parece um excelente exemplo de minimalismo formal.

  • Na prática, o http-equiv tem o mesmo papel de cabeçalho HTTP, então enviar o cabeçalho Refresh: 60 tem o mesmo efeito.

  • Se descobrir o recurso frameset, vai se surpreender ainda mais.

  • Obrigado! E desculpe, mas quando eu nasci, o setTimeout(() => location.reload(), ...) já era amplamente usado.

• Como um desenvolvedor de geração anterior que não acompanha as tecnologias web recentes, fiquei curioso sobre o funcionamento do código abaixo com a combinação astro/cloudflare/wrangler.

  • const { latitude = "0", longitude = "0" } = Astro.locals.runtime.cf || {};

  • Parece que uma função da Cloudflare está encapsulada no Astro para fornecer latitude/longitude, e quero entender se existe algum processamento interno.

  • Procurei na documentação também, mas não encontrei uma resposta clara, então peço uma explicação detalhada.

  • O motivo de não ver um processamento separado é que, na prática, isso parece funcionar como mágica.

    • O Astro oferece vários adaptadores para runtime de servidor (Vercel, Cloudflare, Netlify, etc.) e é simples no modo plug-and-play.
    • O adaptador da Cloudflare expõe vários bindings em Astro.locals.runtime, e entre eles o binding cf inclui diversos valores de requisição como latitude e longitude[link1, link2]
    • Alguns bindings são mockados localmente quando não está no ambiente Cloudflare-Worker.

  • É possível habilitar a Cloudflare para adicionar automaticamente ao cabeçalho HTTP a latitude/longitude do usuário (geralmente por geolocalização por IP ou outros métodos) de forma integrada[link]

    • “Esse transform gerenciado anexa as informações de cidade, país, continente, latitude e longitude do visitante ao cabeçalho da requisição HTTP.”

• Abri o site e esperei 20 segundos por “quando vai mudar”, mas então percebi de repente que era meia-noite.

  • À noite, simplesmente aparece uma tela preta; pensei que seria ótimo se alguém um pouco mais esperto adicionasse algo adicional.

• Sou autor do SunCalc. Fico realmente feliz em ver o meu código sendo usado nesse tipo de aplicação.

  • Só para constar, o suncalc.net está com erro por expiração do token da API do Google Maps[suncalc.net]

    • Já que você parece conhecer bem tecnologia de mapas, deixo uma pequena sugestão de considerar migrar para Protomaps[link]

  • Autor? Colaborador? De qualquer forma, é uma obra excelente e eu realmente curto; é divertido ver demos assim.

• Fiquei recarregando a página, ativando JS e recarregando novamente, e acabei achando que ia ficar fora do ar por sobrecarga do servidor.

  • Só depois de ler os comentários percebi que a tela preta era porque aqui fora era de madrugada, então no fim das contas ela já funcionava bem desde o início.

• A implementação está muito mais sofisticada do que eu esperava. É baseada no paper[link].

• Testei encostando o celular na janela e ficou 100% idêntico ao céu real (agora limpo), então chamei minha esposa pra mostrar e me orgulhar. Achei realmente incrível. Parabéns.

• Sou o criador do ant.care[link]; meu objetivo era sincronizar o céu de fundo com o ambiente real, mas até agora só consegui implementar algo muito básico.

  • Quero aplicar essa abordagem algum dia. Ainda estou em dúvida se faço tudo em Rust/WASM, ou se implemento apenas a parte principal em Rust e deixo o restante em JS/HTML.