HN Explorer

Show HN: The current sky at your approximate location, as a CSS gradient (sky.dlazaro.ca)

788 points by dnlzro ↗ HN
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

[1] https://html.energy/html-day/2025/index.html

68 comments

[ 2.4 ms ] story [ 47.8 ms ] thread
stephenlf
Fantastic. I’ve always wondered why the sky wasn’t blue around the horizon. Fascinating stuff.
throwanem
> 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.

nnnnico
incredible <3 not much else to say
siva7
how i missed this small hn posts. thanks
hoppp
Seems to work :)
ryandrake
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...

bravesoul2
The thing here is programming the job can be much more dull than programming the hobby. Occasionally (twice a decade) there can be a collision where you get to do something really cool like that at work. The higher ups want a realistic sky because their market research said it'll boost an OKR by 10 basis points. And then you are in luck!

That said there are niches where jobs let you do cool stuff all the time. Hard to find. Probably why gaming jobs are notoriously underpaid and overworked.

maddmann
Haha it sounds you applied the opposite of the YAGNI principle building this.
GuardianCaveman
I identify so much with your sentiment and this type of overthinking overbuilding .
nkrisc
That sounds really cool but I have to reluctantly agree with the senior: a cartoonish day/night sky is better than a half-implemented realistic one. I say “half-implemented” because it sounds as though yours didn’t account for local weather and cloud cover, which is reasonable but then incomplete. Even if you did, well, it’s turn-by-turn navigation. I expect the sky color to be selected for ideal contrast with the important UI elements to reduce the time spent looking at it while driving.
ianbicking
I'm around so much wildfire smoke lately that my sky expectations have changed...

I wonder what it would take to account for weather?

nisten
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

nhinck3
Opened this up and sat there for a good 20 seconds waiting for something to happen... only to remember it's midnight here.
mlhpdx
Which direction am I looking? Deeper blue to the north.
i_love_retros
Curious why a celebration of HTML needed a full stack javascript framework?
djoldman
@dlazaro, I believe that style={{backgroundColor: bottom}} is not needed in:

    <body style={{backgroundColor: bottom}}> </body>
is not needed.
jhardy54
Super neat. Looking forward to checking out your implementation and learning about this!
gdubs
Well, that's delightful. Works really well here in the Pacific Northwest :)
101008
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
xattt
This would be an awesome background for a smart home dash!
DonHopkins
Why doesn't it respect dark mode??? ;)
cosmicgadget
That is awesome but now I want to check what my SF bros see when they look up.
cgijoe
Ooh, how about this as a live desktop wallpaper!
SeanAnderson
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.
card_zero
Useful, saves me looking at the thing.
mourner
Author of Suncalc here — this is exactly the kind of stuff I love to see my code being used in, thanks for sharing!