Servicio que muestra el cielo actual como degradado CSS según tu ubicación aproximada

 (sky.dlazaro.ca)
4 puntos por GN⁺ 2025-08-10 | 1 comentarios | Compartir por WhatsApp
  • Utiliza la dirección IP del usuario para estimar su ubicación actual
  • Visualiza el color y ambiente del cielo correspondiente a esa ubicación mediante un degradado CSS
  • Sin mapas adicionales o entradas complejas, es posible ver el resultado de inmediato solo con entrar al sitio web
  • La interfaz es simple y liviana, por lo que cualquier persona puede acceder fácilmente
  • No refleja información meteorológica real y decide los colores según la zona horaria y la posición solar basadas en la ubicación

Visión general del servicio

  • Cuando se accede a este servicio web, la ubicación aproximada del usuario (latitud y longitud) se estima utilizando la dirección IP
  • Con la ubicación estimada y la hora local, se calcula la tonalidad del cielo según la posición del sol y la zona horaria
  • Los colores del cielo calculados se renderizan como fondo del sitio web en formato degradado CSS, mostrando en tiempo real el ambiente del cielo
  • No hay un proceso de ingreso de datos adicional; simplemente al acceder al sitio web funciona automáticamente

Funciones y características

  • No hay procesos complicados con mapas, APIs del clima o registro de cuentas
  • Implementación de visualización en tiempo real: el color del cielo cambia dinámicamente según la variación horaria de la ubicación actual
  • Se implementa únicamente con degradados CSS, ofreciendo una experiencia de usuario muy rápida y liviana
  • No se reflejan condiciones de clima peligroso, nubes ni precipitaciones; por defecto se aplica un algoritmo centrado en el ángulo del sol y el tiempo

Uso y relevancia

  • Es una herramienta de suministro de información visual simple que no es tan compleja como una app de clima o un servicio de mapas
  • Tiene un alto valor de uso también como arte web o proyecto de demostración personal
  • Proporciona pistas visuales localizadas automáticamente, por lo que es adecuado para resolver rápidamente la duda de “¿cómo será el cielo aquí ahora?”

Lecturas relacionadas

1 comentarios

 
GN⁺ 2025-08-10
Opinión de Hacker News

  • Recuerdo que en mis inicios, cuando hacía un software de navegación 3D turn-by-turn, me tocó la parte de pintar el cielo.

    • Mi superior decía que “solo hay que hacerlo azul de día y un cuadrado gris oscuro de noche”, pero yo quería ver un cielo real que cambiara según el entorno, la latitud, la longitud y la hora, así que implementé un modelo de cielo realista basándome en el paper de Preetham[enlace].

    • Las constelaciones venían de una tabla astronómica hardcodeada y el rendimiento era bastante decente.

    • Pero la parte ejecutiva se asustó con efectos realistas como un horizonte brumoso y con tinte amarillo, y dijo que “el cielo de los competidores es azul”; incluso mi respuesta de “mira por la ventana” no les funcionó.

    • Al final borré todo y me quedé con un cuadrado azul.

    • Gracias a esa experiencia, cuando veo un sitio así me parece realmente genial.

    • Por eso entendí lo importante que son las especificaciones y el diseño.

      • Es clave que el patrón se entienda de inmediato, y demasiado detalle visual solo genera más confusión.
      • Si el cielo no se ve azul sino borroso o lechoso, uno puede dudar si es cielo o si la página todavía está cargando; con las estrellas pasa lo mismo y de noche no aportan un propósito funcional.
      • Ese realismo funciona mejor en vistas de planeta real como Google Earth. Es divertido hacerlo así, pero para una vista de navegación lo más importante es la simplicidad y la claridad. Primero importa la utilidad, no el realismo.

    • Antes trabajé con alguien que me contó que en el juego Cobalt[enlace] invirtió demasiado tiempo intentando implementar el sistema de estrellas con física.

      • Si afecta la usabilidad, se podrían quitar esos elementos al final, pero creo que esas pequeñas piezas suman y aumentan la calidad percibida, además de darles más ganas de explorar al usuario.

    • En casos así, programar es más aburrido como trabajo que como hobby.

      • A veces viene la oportunidad de hacer algo bonito en la empresa, pero en general solo pasa si aparece un resultado de investigación tipo “un cielo real aumenta el indicador OKR en 0,1%”.
      • Sin embargo, siempre hay un nicho donde sí puedes hacer algo entretenido; por eso la industria de videojuegos suele tener salarios bajos y altas exigencias para la pasión que pide.

    • Ver a la gerencia ignorar la creatividad de un innovador es un ejemplo típico de gestión absurda.

    • Al menos pensé que eso podía ir como Easter egg.

      • Habría estado mejor si hubieran dicho, inspirándose en ello, que las pinturas de Vincent Van Gogh reflejan posiciones reales de constelaciones y que por esa inspiración se intentó reproducir el color realista del cielo.

  • Estamos lanzando un sensor para colocar en el interior de ventanas. Este sensor mide el color del cielo con un ángulo de cono pequeño y envía el resultado a skylights y a fixtures interiores de ventana para recrear el mismo cielo dentro del espacio[innerscene.com]

    • También podría hacerse con una pantalla de computadora, pero al no usar espectro completo en lugar de una fuente RGB, la iluminación interior queda limitada y desigual.
    • Además, un problema actual del código es que no contempla variables como nubes, bruma o humo, así que puede diferir del paisaje exterior real (lo señalaron muchos comentarios de HN).
    • Con imágenes satelitales en tiempo real se puede compensar parcialmente, pero como es difícil que sea perfecto, al final terminamos desarrollando nuestro propio sensor.
    • En el mercado ya hay varios sensores CCT, pero normalmente solo miden dirección + dispersión + luz reflejada y su límite ronda 7500K, aunque el cielo real puede variar hasta 40.000K.
    • Compartimos una imagen de la gráfica con cómo cambia el color del cielo según la hora usando medidas reales del sensor[imagen] y más información[enlace].

  • Ver que se menciona la etiqueta HTML meta http-equiv="Refresh" me sacó una sonrisa.

    • Antes, cuando una página necesitaba autorecarga, ese era el único método.

    • Me pareció que este proyecto era un ejemplo excelente de minimalismo formal.

    • En realidad, el sentido de http-equiv es que actúa como el mismo header HTTP; enviar un header Refresh: 60 produce el mismo efecto.

    • Te sorprendería descubrir la función de frameset (marco de páginas).

    • ¡Gracias! Y disculpa, pero para cuando nací, setTimeout(() => location.reload(), ...) ya se usaba bastante.

  • Como desarrollador veterano que no maneja las tecnologías web más nuevas, me intriga cómo funciona este fragmento con la combinación astro/cloudflare/wrangler:

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

    • Me parece que la capa de Cloudflare está siendo envuelta por astro para traer latitud/longitud, y quiero saber si hay algún procesamiento interno.

    • Revisé la documentación y no encontré una respuesta clara, así que agradecería una explicación detallada.

    • La razón por la que no se ve procesamiento interno separado es porque realmente funciona como si fuera magia.

      • Astro provee varios adaptadores de runtime de servidor como Vercel, Cloudflare y Netlify, y funcionan en modo plug and play.
      • El adaptador de Cloudflare expone diferentes bindings en Astro.locals.runtime, y entre ellos el binding cf incluye varios valores de la request como latitud y longitud.[enlace1, enlace2]
      • Algunos bindings se simulan localmente cuando no estás en un entorno Cloudflare Workers.

    • En Cloudflare se puede habilitar una función que agregue automáticamente al header HTTP la latitud/longitud del usuario (aproximadamente por IP o por otros métodos).[enlace]

      • “Esta transformación administrada adjunta al header de la solicitud HTTP información del visitante como ciudad, país, continente, latitud y longitud.”

  • Abrí el sitio y esperé 20 segundos preguntándome “¿cuándo cambia?”, pero de golpe me di cuenta de que ahora era medianoche.

    • En la noche solo muestra una pantalla negra; habría sido bueno si alguien un poco más listo hubiese agregado estrellas.

  • Soy el autor de SunCalc. Ver un caso de uso de mi código así me alegra de verdad.

    • Por cierto, suncalc.net tiene un error porque expiró el token de Google Maps API[suncalc.net]

      • Como sabes de mapas, como sugerencia menor te recomendaría considerar una migración a Protomaps[enlace]

    • Autor, contribuidor, no sé. En fin, es una obra increíble y de verdad me gusta; ver demos como esta es divertido.

  • Se me ocurrió recargar la página, habilitar JS y recargar una y otra vez, y al final pensé que no cargaba por saturación del servidor.

    • Solo al leer los comentarios entendí que la pantalla negra era porque afuera era de noche, y que en realidad había funcionado bien desde el principio.

  • Es una implementación mucho más compleja de lo que esperaba. Está basada en un paper de investigación[enlace].

  • Pegué el teléfono a la ventana para probarlo y coincidía un 100% con el cielo real (ahora está despejado). Llamé incluso a mi esposa para presumirlo y me pareció realmente increíble. ¡Felicidades!

  • Soy quien está creando ant.care[enlace]; el objetivo era sincronizar el cielo de fondo con el entorno real, pero hasta ahora está implementado de forma muy simple.

    • Algún día me gustaría probar también este enfoque. Aún no decido si hacerlo todo en Rust/WASM o implementar solo el núcleo en Rust y dejar el resto en JS/HTML.