alt Hacker NewsShow HN: The current sky at your approximate location, as a CSS gradient
For HTML Day 2025 [1], I made a web service that displays the current sky at your approximate location as a CSS gradient. Colours are simulated on-demand using atmospheric absorption and scattering coefficients. Updates every minute, without the use of client-side JavaScript.
Source code and additional information is available on GitHub: https://github.com/dnlzro/horizon
Comments
> the little-known meta http-equiv="Refresh" HTML tag
Oh, don't mind me, I'll just be over here in the corner laughing ruefully as my bones crumble to dust: back when I started, if you wanted a page to refresh on its own, this was the only way.
Beautiful work! A splendid example of formal minimalism at its best.
Opened this up and sat there for a good 20 seconds waiting for something to happen... only to remember it's midnight here.
As an old-timer who's not up on all the latest whiz-bang web stuff, I have to ask what is the astro/cloudflare/wrangler magic that allows the following to work:
const { latitude = "0", longitude = "0" } = Astro.locals.runtime.cf || {};
Very cool. We are launching a sensor that mounts on the inside of your window and measure the sky color for a small cone of the sky and transmits this to our skylight and window fixtures inside (see innerscene.com) so they can replicate exactly the same thing indoors. You could potentially use a computer monitor to do this, but it generally doesn't provide great light due to using RGBs instead of wide-spectrum sources.
One issue with the current code is it doesn’t model clouds, haze, or smoke so the rendered sky can differ from what you see outside (numerous HN comments notice this). You can partially correct for this by using semi-realtime satellite imaging but hard to get super accurate which is what pushed us to develop our own sensor. There are various CCT sensors on the market already but they only measure directional+diffuse+reflected light which is typically ~7500k but the sky color goes up to 40,000k.
Here is a plot showing the color of the sky as it changes during the day from real sensor readings. Each one is 30s apart, so it change change quickly. https://www.innerscene.com/built_pages/cs_specsheet/cct/cct_...
A bit more info as well: https://www.innerscene.com/SpecHelp/CircadianSky/cct/cct.htm...
Author of Suncalc here — this is exactly the kind of stuff I love to see my code being used in, thanks for sharing!
More sophisticated than I expected. It relies on a research paper: https://github.com/ebruneton/precomputed_atmospheric_scatter...
Put my phone against the window and I had to call over my wife to come to check it: it matches 100% (clear sky right now). It's amazing, congratulations
I refreshed the page, enabled js, refreshed again and again and finally I gave up thinking it is not loading because it was hugged to death. While reading the comments here it dawned on me that it was just a black background because it is night outside and the paged worked fine from the start...
Oh nice, this is actually something I very specifically wanted for https://ant.care/! I was trying to have the background sky for the ant farm be reflective of the user's current environment, but I didn't do anything more than a naïve approach. Maybe I'll work on adopting your approach at some point :) Still a bit torn on if the whole thing should be Rust/WASM or just the core simulation in Rust and defer as much as possible to JS/HTML.
This would be an awesome background for a smart home dash!
It’s way too dark for this time of year at this time of day here at 60 degrees north.
But it looked very cool earlier today when it matched!
This reminds of of a web page that did this for Ithaca NY circa 1995. The page was a static hardcoded shade of grey.
Tried this out now- it's totally gray outside as far as the eye can see, but the sky.dlazaro.ca shows it as clear blue. I wonder where the disconnect / divergence is originating from! Super neat idea in concept :)
i put my laptop next to the window and it was spot on wtf
what got me the most is opening chrome dev tools and seeing nothing there
I'm around so much wildfire smoke lately that my sky expectations have changed...
I wonder what it would take to account for weather?
This might be a stupid question, but is it the background of https://html.energy/html-day/2025/index.html that shows the current sky? I am a bit confused since neither the post or the github repo says so outright.
Edit: I think its this link: https://sky.dlazaro.ca/ OP - put it in the HN post and first on your github repo! Good work.
Useful, saves me looking at the thing.
Should anyone appreciate it, this Shortcut for your iOS/iPadOS device will set your wallpaper to the current sky based on this nice tool:
https://www.icloud.com/shortcuts/c8ba254a0272453cbe39357b144...
Just make sure that your last (or only) iDevice Home Screen is set to type “image”.
Tid bits like this are why HN is still the best corner of the internet most of the time.
This is really cool. I’ll probably see if I can make it my new tab background in Chromium.
Very cool, though I opened it at night so it's just black. Is there a way to adjust the time it renders to see what it would look like at different times?
Not often does a project make me think "adorable", and it's a compliment. Just lovely.
Would be cool if it considered current weather conditions. The sky is presently much grayer than what the site showed me.
Neat tool, would love to be able to set the location when the registered IP location isn’t accurate.
would love this to be a desktop background -- linux or macOS
Very cool concept. Would be great if there’s an option to tweak the gradient before copying, so devs can match it exactly to their design needs.
This would be cool on a fake window for your house, like a screen in a basement
Very cool! Might be interesting to combine this with cloud data or sunset forecast data from Sunsethue to create some sort of sky/sunset simulation. Well done!
I'll have to check this out tomorrow. I can tell you that black is not very accurate for my current conditions (midnight in Manhattan) but curious to see how it does in the day!
21pm in The Netherlands, the sky is a clear blue down to a baby pink right now, however the app shows a black to dark red. Other people are saying it matches exactly for their location so maybe there's some sort of bug?
This project looks amazing and fun. However, the website did not seem to take the cloudy weather at my current location into account, which is a bit of a disappointment.
That is awesome but now I want to check what my SF bros see when they look up.
Is this all done server side? I was shocked to inspect the page to discover zero js or even a stylesheet. Not so much as a single div. Very impressive.
@dlazaro, I believe that style={{backgroundColor: bottom}} is not needed in:
<body style={{backgroundColor: bottom}}> </body>
I have been meaning to do it for ages! I got as far as finding a paper on the topic and reading it and then forgetting all about it. Nice work.
Fully black web page for me here. Well its correct
This is really cool! And from skimming your code, TIL about Math.hypot!
Ok this is incredible, it was exactly right, I did a double take!
Fantastic. I’ve always wondered why the sky wasn’t blue around the horizon. Fascinating stuff.
Super neat. Looking forward to checking out your implementation and learning about this!
Well, that's delightful. Works really well here in the Pacific Northwest :)
Ahhh you’re not taking light pollution into account!
I like this, but I’m newly concerned about the unitary horizon.
Feels like this would be great for fake skylights…
Which direction am I looking? Deeper blue to the north.
Looks pretty Carolina blue to me. Good job.
sunsetting in the monroe, wa area. only a month left to live out here, gonna miss it dearly
incredible <3 not much else to say
Awesome. I remember much earlier in my career I was working on a 3D turn-by-turn navigation software, and one of my tasks was to draw the sky in the background. The more senior guy on the team said, just draw a blue rectangle during the day and a dark gray one at night and call it job done. Of course, I had to do it the hard way, so I looked up the relevant literature on sky rendering based on the environment, latitude, longitude, time of day and so on, which at the time was Preetham[1] ("A Practical Analytic Model for Daylight"), and built a fully realistic sky model for the software. I even added prominent stars based on a hard-coded ephemeris table. It was quite fast, too.
Well, the higher ups of course hated it, they were confused as to why the horizon would get hazy, yellowish, and so on. "Our competitors' skies are blue!" They didn't like "Use your eyes and look outside" as an answer.
Eventually, I was told to scrap it and just draw a blue rectangle :(
All that to say, nice job on the site!
1: https://courses.cs.duke.edu/cps124/fall01/resources/p91-pree...