[HN Gopher] Show HN: The current sky at your approximate locatio...
___________________________________________________________________
Show 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 [1]
https://html.energy/html-day/2025/index.html
Author : dlazaro
Score : 495 points
Date : 2025-08-09 13:25 UTC (9 hours ago)
(HTM) web link (sky.dlazaro.ca)
(TXT) w3m dump (sky.dlazaro.ca)
| stephenlf wrote:
| Fantastic. I've always wondered why the sky wasn't blue around
| the horizon. Fascinating stuff.
| verandaguy wrote:
| There's two main reasons for this:
|
| - First and most impactful: as the earth curves down and away
| from the observer's horizon, your line of sight goes through a
| thicker slice of the atmosphere.
|
| Looking straight up you might have 100km of atmosphere until
| space (the distance is made up here, but I'm using the Karman
| line as an arbitrary ruler), but looking out towards the
| horizon (assuming a perfectly spherical Earth), it's much,
| _much_ more than that 100km, so the light will scatter off of
| (and /or be filtered by, depending on angle and time of day)
| more particles in the atmosphere, affecting the colour of the
| sky.
|
| - The compounding factor here is if there are environmental
| factors that boost the particle count in the air, and
| especially particles that'd stay in lower layers of the
| atmosphere. Where I am, we've been dealing with wildfire smoke
| of varying strengths for a few weeks. Today's gentle enough,
| but it's bad enough that my gradient goes from rgb(115, 160,
| 207) at the top of the sky to rgb(227, 230, 227) at the horizon
| (which is shockingly accurate).
| throwanem wrote:
| > 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.
| dlazaro wrote:
| Thank you! And umm, not to make you feel ancient, but I think I
| wasn't even _alive_ yet when `setTimeout(() = >
| location.reload(), ...)` first became widely available.
| throwanem wrote:
| Oh, don't worry about it at all, and I don't just mean in my
| own case. Every generation learns to age graciously or
| otherwise, partly through experience, and for me it's a
| regular source of joy to see you young 'uns independently
| rediscover things I long since quit bothering to remember.
| phatskat wrote:
| Honestly it's kind of cute, I had all but forgotten about
| http-equiv
| skrebbel wrote:
| I can't wait till they hear about framesets
| mintplant wrote:
| Of course, the "http-equiv" means that this tag is supposed to
| stand in for an equivalent HTTP header, so you could accomplish
| the same by sending a "Refresh: 60" header :)
| throwanem wrote:
| Sure, if you wanted to deal with configuring Apache. Or
| getting your hosting provider to do that. If you knew to ask,
| and didn't mind waiting, and your hosting provider knew
| how...
| dudus wrote:
| Not sure what you are on about. Adding an HTTP header to a
| request is one of the easiest things to do.
| urquhartfe wrote:
| I think you are the one who doesn't know what they are on
| about.
|
| First, the header must be added to the response, not the
| request.
|
| Second, in many environments (managed hosting etc.) there
| is not an easy way (or indeed a way at all) of adding
| headers to responses.
| dylan604 wrote:
| is that something that could have be done in the dot file
| for server override? what was it, .htaccess or something?
| throwanem wrote:
| Sure, if you wanted to deal with configuring Apache. Or
| getting your hosting provider to do that. If you knew to
| ask, and didn't mind waiting, and your hosting provider
| knew how...and was willing to do it, a condition I forgot
| to add in my last comment here, but which applies equally
| there. (User-provided .htaccess files were the source of
| a number of relatively high-profile early CVEs, as I
| recall. Apache grew a number of options for trusting
| their content, and I want to say before very long you
| could not rely on anything working past simple HTTP-Basic
| credential management.)
|
| Oldschool shared web hosting was a shockingly deprived
| environment by modern standards, which is why my Linode
| account turned old enough a few months ago to buy a drink
| in a bar: $20 a month in 2004 was _amply_ worth gaining a
| degree of control over web server configuration which is
| broadly the default assumption now.
|
| Since I was also _administering_ some shared web hosting
| in my own right at the time, I don 't blame admins for
| being difficult to work with; we all had good reason to
| be, with the afterthought security typically was
| everywhere in those days. But you begin perhaps to see
| why bypassing the whole rigamarole with a hint to the
| client was attractive.
| dylan604 wrote:
| but that was the point of the dot file to allow vhosts to
| change the default server settings without needing access
| to the root config. maybe they weren't designed
| specifically for vhosts, but that was my main use of
| them.
| js2 wrote:
| There was also server[-side] push:
|
| https://www.oreilly.com/openbook/cgi/ch06_06.html
| nnnnico wrote:
| incredible <3 not much else to say
| siva7 wrote:
| how i missed this small hn posts. thanks
| hoppp wrote:
| Seems to work :)
| ryandrake wrote:
| 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...
| j_bum wrote:
| Fun (but not fun) story :)
| netsharc wrote:
| Not even as an easter egg?
|
| You could've sold it with telling them Vincent Van Gogh's
| paintings had the location of stars accurately, you were
| inspired by those paintings to reproduce the sky color
| accurately.
| darknavi wrote:
| A past coworker who worked on Cobalt[1] told me that they spent
| entirely too much time implementing stars in the sky of the
| game with some amount of real(ish) star system physics behind
| them.
|
| I can understand people removing polish things like that if
| there are usability concerns, but those small things add up to
| a lot in an end product and are a joy to find and explore.
|
| 1: https://en.wikipedia.org/wiki/Cobalt_(video_game)
| pava0 wrote:
| Cobalt was a really interesting game, too bad it never got
| any fame
| dylan604 wrote:
| The last thing you want is to receive a message from Neil
| Degrasse Tyson about how wrong your sky was
|
| https://duckduckgo.com/?t=ffab&q=neil+degrasse+tyson+gives+j.
| ..
| zarzavat wrote:
| You should have added a duck.
| otikik wrote:
| I understood that reference
| jbverschoor wrote:
| Whipping down the innovator with the stupidity whip. Great
| management
| ryandrake wrote:
| A foundational, core theme about making commercial software,
| that repeats over and over and I slowly got accustomed to is:
| companies really don't want these kinds of micro-innovations.
| 90% of companies are just looking at their competitors,
| making a checklist out of those products, and asking
| engineers to check the boxes and go home. They don't care
| about little details, about craftsmanship and polish, about
| lint warnings, about "oh, that's a nice touch," or even
| quality beyond "will the customer return the product?" They
| just want people to poop out software as fast as possible so
| everyone can get bonuses and drive around on their jetskis on
| Saturday.
|
| If you're the kind of developer who likes to "sand and finish
| the back side of the cabinet," either you need to find a very
| rare, special company, or do it at home as a hobby.
| jbverschoor wrote:
| But it's exactly the thing that makes software
| "delightful". It's also a huge boost to the developer's
| appreciation, motivation, productivity, care for the
| product.
|
| But yeah, if you only care about checking the feature
| boxes.. Go ahead, make shit software with miserable people,
| but be sure to prepare to go out of business.
| philipallstar wrote:
| The point is a real skybox is not great for satnav
| software. It's probably actually worse than a stylised
| mode, with a predictable colour background for anything
| that's going to sit on top of it.
| cyberax wrote:
| > They don't care about little details, about craftsmanship
| and polish, about lint warnings, about "oh, that's a nice
| touch," or even quality beyond "will the customer return
| the product?"
|
| I worked at large companies, and there are reasons beyond
| that. I've been on the both sides of this fence.
|
| Senior engineers feel the pain of supporting all these
| features. You created a new streaming API prototype that
| provides a gradual response, progressively displaying
| details of the 3D model? Great. But it's 15000 lines of
| dense code without a lot of explanation. Who is going to
| support it once you leave the company? Is it secure? How
| does it work with kiosk-type browsers? Can you write a
| formal proposal so we can start the review process?
|
| Oh, I see that you're already leaving the company :(
|
| And that's also why startups are often so much more
| successful initially. They just don't care about the long-
| term support and YOLO a lot of functionality.
| woah wrote:
| It sounds like the developer spent a lot of time implementing
| something that nobody wanted. Drawing the sky accurately may
| be cool, but it wasn't required in this case. It's also not
| innovation. It's been done before.
|
| This is like if you were renovating your house and the
| drywall guy spends a huge amount of time building up round
| corners, but you just wanted regular square corners. Then on
| some drywall forum they're bitching about how "all clients
| are stupid" or something.
| ChrisMarshallNY wrote:
| I've been in the developer's shoes. I've also been in the
| manager's shoes.
|
| It's not that simple. There's possibly better ways to deal
| with it, but for safety-critical stuff (like a navigation
| display in a vehicle), simple is much, _much_ better. In many
| cases, there 's actually laws and liability stuff involved.
|
| I once spent six months, developing an "un-asked-for" WiFi
| control app for a digital camera, and had it nuked. It worked
| _much_ better than the shipping app (which was enjoying a
| richly-deserved one-star rating in the app store).
|
| The considerations had a lot to do with the corporate Process
| (note the capital "P"), which I sidelined. I thought I could
| do better, but the people with the hands on the brake,
| thought different. I didn't kiss the right rings. That's a
| very real consideration in any corporation.
|
| As a manager, however, I did go to bat for employees that
| displayed initiative. In some cases, I was successful. In
| some cases, not so much.
| teaearlgraycold wrote:
| To be honest I don't think anyone wants that kind of
| functionality - maybe in the satellite view but not in the
| vector map.
| marcosdumay wrote:
| Yep, if you have to draw the Sun, you better draw it yellow. If
| you have to draw a cloudless day sky, you better draw it blue.
|
| That doesn't apply to every single instance of those, but if
| the sky isn't the focus of your application, a realistic one is
| just a distraction.
| dylan604 wrote:
| > Yep, if you have to draw the Sun, you better draw it
| yellow.
|
| This one always gets me in how dirty the sky must have been
| "back in the day" in order for people to see a yellow sun.
| I've never looked into what gas would be needed to make the
| sun look yellow, but it must have been hell to breathe.
| benrutter wrote:
| Ironically, I'm in the South of England wih clear blue sky, and
| the site thinks I have a much darker and beautiful reddish
| sunset. Im fairness, it's probably only out by an hour if that.
| Waterluvian wrote:
| I've had similar issues at work where people really overdo
| something and it's difficult. On one hand you never want to
| kill that joy and passion someone has. That's a great
| characteristic. But projects have scopes and too often
| instructions like "just draw a blue rectangle" get ignored.
| ryandrake wrote:
| Totally. It was a harsh but needed lesson on the realities of
| getting work done in a commercial environment.
| crazygringo wrote:
| This is why specifications are important, and why design is
| important.
|
| The reality is that we have certain conventions that are
| immediately understandable, and that too much visual complexity
| results in confusion rather than clarity.
|
| If the sky is hazy white when I expect it to be blue, I'm
| confused as to whether it's the sky or if the map is still
| loading. It's adding cognitive complexity for no reason. Stars
| similarly serve no functional purpose at night.
|
| What you built sounds great for an actual planetary view like
| Google Earth. And it sounds fun to build. But it's an anti-
| feature for a navigation view. When you're navigating,
| simplicity and clarity are paramount. Not realism.
| johnfn wrote:
| Oh come now. You are being no fun.
| dylan604 wrote:
| > This is why specifications are important, and why design is
| important.
|
| Also the phrase "know your audience". No sense in casting
| pearls before the swine.
| resonious wrote:
| Though sometimes the higher ups might not be the same as
| (or understand) the actual audience.
|
| In this case the higher ups may have been confused due to,
| say, looking at the app while indoors (and from the
| perspective of "let's judge this developer's work"), while
| the actual users would see it in a vehicle alongside the
| real sky (and from the perspective of "let's see how easy
| this is to match up with reality").
| dylan604 wrote:
| Ah, I see the confusion. You think the users are the
| dev's audience! /s
| bravesoul2 wrote:
| 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.
| ianbicking wrote:
| I'm around so much wildfire smoke lately that my sky expectations
| have changed...
|
| I wonder what it would take to account for weather?
| craftkiller wrote:
| That'd be a pretty large introduction of a dependency. The sky
| can be calculated with just lat/lon and the current date+time.
| Adding in weather would mean querying some external weather
| service.
| nisten wrote:
| 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 wrote:
| Opened this up and sat there for a good 20 seconds waiting for
| something to happen... only to remember it's midnight here.
| dlazaro wrote:
| Maybe someone smarter than me could add stars to the night sky,
| so it's not just black.
| nativeit wrote:
| I was just thinking about how to slice up a star map
| projection, and apply it as an overlay. I don't do such
| things often enough to do it quickly, although I can imagine
| how it could be achieved. I'd imagine someone working in game
| dev probably could whip up a mechanism for applying
| coordinates to a star map fairly quickly, but realizing it in
| pure CSS would probably require exporting all the slices to a
| folder as SVG squares that are labeled with coordinates, and
| then using a bit of JS to stitch it all together in the
| rendered page.
| mpetroff wrote:
| I wrote a simple web-based night sky viewer a while ago
| [1], which renders the 750 brightest stars from coordinates
| in a data file (along with the moon). It uses D3.js to do
| fully client-side SVG-based rendering for interactive use,
| but it could be simplified to render server side to an SVG
| file. I think the main complication is that by adding
| stars, a projection needs to be decided on, and you'd need
| to consider the aspect ratio of the browser window.
|
| [1] https://github.com/mpetroff/nightsky
| mlhpdx wrote:
| Which direction am I looking? Deeper blue to the north.
| dlazaro wrote:
| It's always facing the sun (although it doesn't include the sun
| itself).
| i_love_retros wrote:
| Curious why a celebration of HTML needed a full stack javascript
| framework?
| dlazaro wrote:
| A server is needed to calculate the sun's position from
| latitude + longitude + time, and then render the gradient. I
| could use HTML templating in some other language/framework, but
| I used Astro because that's what I'm familiar with and it's
| very easy to deploy to Cloudflare Pages.
| nnnnico wrote:
| it's beautiful. btw, could this be all done in client side
| js? didnt look at the implementation, probably server is used
| to resolve location?
| wonger_ wrote:
| (not author) from the source: const {
| latitude = "0", longitude = "0" } = Astro.locals.runtime.cf
| || {};
|
| To do it client-side, you would probably have to call some
| less-reputable IP geolocation service, or settle for
| navigator.geolocation which has a permission popup
| ascorbic wrote:
| Astro is a great way to write HTML
| dlazaro wrote:
| I'm sure that's your _totally unbiased_ opinion ;)
| djoldman wrote:
| @dlazaro, I believe that style={{backgroundColor: bottom}} is not
| needed in: <body style={{backgroundColor:
| bottom}}> </body>
|
| is not needed.
| dlazaro wrote:
| I actually included that so the tab and status bars are themed
| on iOS/Safari. Here's someone else's writeup on that:
| https://medium.com/@evkirkiles/coloring-the-webkit-browser-b...
| peterldowns wrote:
| That's a cool thing to know, thanks for sharing. Great job on
| the sky site!
| djoldman wrote:
| Today I learned! Thanks
| doughecka wrote:
| Wow, this works in chrome on Android as well
| jhardy54 wrote:
| Super neat. Looking forward to checking out your implementation
| and learning about this!
| gdubs wrote:
| Well, that's delightful. Works really well here in the Pacific
| Northwest :)
| esafak wrote:
| More sophisticated than I expected. It relies on a research
| paper:
| https://github.com/ebruneton/precomputed_atmospheric_scatter...
| 101008 wrote:
| 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 wrote:
| This would be an awesome background for a smart home dash!
| fudged71 wrote:
| It would be awesome for a fake window in a basement
| mushufasa wrote:
| would love this to be a desktop background -- linux or macOS
| nathandaly wrote:
| I just did some googling and found at least one app to do
| exactly this on Android. This is now my phone background!!
|
| (I used this, but it does leave a small "please purchase"
| banner at the top, until you pay: https://play.google.com/store
| /apps/details?id=com.nuko.livew...)
| DonHopkins wrote:
| Why doesn't it respect dark mode??? ;)
| 8n4vidtmkvmk wrote:
| Wait a few hours
| cosmicgadget wrote:
| That is awesome but now I want to check what my SF bros see when
| they look up.
| cgijoe wrote:
| Ooh, how about this as a live desktop wallpaper!
| SeanAnderson wrote:
| 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 naive 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.
| michelreij wrote:
| Beautiful, thank you!
| card_zero wrote:
| Useful, saves me looking at the thing.
| mourner wrote:
| Author of Suncalc here -- this is exactly the kind of stuff I
| love to see my code being used in, thanks for sharing!
| sheerun wrote:
| Author or contributor? Great work, by the way, I love such
| shows
| mourner wrote:
| Wrote it 14 years ago! https://github.com/mourner/suncalc/
| It's a bit neglected but I'll do some upkeep shortly...
| gregsadetsky wrote:
| Hey, small note that your excellent https://suncalc.net/ is
| showing an error due to the Google Maps API token having
| expired.
|
| I know that you deeply know map tech :-) but if I may make a
| suggestion - you might consider switching from Google Maps to
| Protomaps? https://github.com/protomaps/protomaps-leaflet
|
| Cheers
| mourner wrote:
| Yeah, I think I last updated that website even before I
| released the first version of Leaflet. Life is very hectic at
| the moment, but I do really want to get to it sooner than
| later and modernize everything.
| sheerun wrote:
| Bit darker blues, please!
| therealfiona wrote:
| Works in Hawaii.
| cwmoore wrote:
| Even at sunrise?
| fmbb wrote:
| 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!
| yonatan8070 wrote:
| 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?
| cwmoore wrote:
| I like this, but I'm newly concerned about the unitary horizon.
| tinco wrote:
| 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?
| croisillon wrote:
| during the day it was good here, now that it is night it's a
| bit off for me too
| cloudfudge wrote:
| 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 ||
| {};
|
| I gather you're using some cloudflare feature wrapped in astro to
| provide lat/long but I don't see the actual plumbing that gets it
| to you (and I did try to spelunk through a decent amount of
| documentation to find it). Can you elaborate?
| gregsadetsky wrote:
| You can enable a feature in Cloudflare which will inject the
| approximate user's lat/lng (based on their IP (and other
| factors?)) as an HTTP header added to the original request:
|
| https://developers.cloudflare.com/network/ip-geolocation/
|
| "This Managed Transform adds HTTP request headers with location
| information for the visitor's IP address, such as city,
| country, continent, longitude, and latitude."
| dlazaro wrote:
| There is no visible plumbing because it kinda _is_ magic! Astro
| provides adapters for different server runtimes (e.g., Vercel,
| Cloudflare, Netlify), and it 's basically just plug and play.
| The Cloudflare adapter exposes a bunch of bindings [1] through
| `Astro.locals.runtime`, which can be accessed during each
| request. The `cf` binding contains incoming request properties
| [2], including latitude and longitude.
|
| These bindings (or at least some of them) are also mocked when
| developing locally, in a non-Cloudflare-Workers environment.
|
| [1]
| https://developers.cloudflare.com/workers/wrangler/api/#supp...
|
| [2] https://developers.cloudflare.com/workers/runtime-
| apis/reque...
| cloudfudge wrote:
| Great explanation; thanks.
| sudosteph wrote:
| Looks pretty Carolina blue to me. Good job.
| verelo wrote:
| Feels like this would be great for fake skylights...
| dehugger wrote:
| 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.
| mgdm wrote:
| 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.
| joeyh wrote:
| This reminds of of a web page that did this for Ithaca NY circa
| 1995. The page was a static hardcoded shade of grey.
| j45 wrote:
| Neat tool, would love to be able to set the location when the
| registered IP location isn't accurate.
| ryukoposting wrote:
| Would be cool if it considered current weather conditions. The
| sky is presently much grayer than what the site showed me.
___________________________________________________________________
(page generated 2025-08-09 23:00 UTC)