11 ms·

Show HN: The current sky at your approximate location, as a CSS gradient

• sheerun 1y ago
  Bit darker blues, please!
• stephenlf 1y ago
  Fantastic. I’ve always wondered why the sky wasn’t blue around the horizon. Fascinating stuff.
  • verandaguy 1y ago
    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 Kármán 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 1y ago
  > 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.
  • dnlzro 1y ago
    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 1y ago
      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 1y ago
        Honestly it’s kind of cute, I had all but forgotten about http-equiv
  • skrebbel 1y ago
    I can’t wait till they hear about framesets
  • mintplant 1y ago
    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 1y ago
      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...
• nnnnico 1y ago
  incredible <3 not much else to say
• siva7 1y ago
  how i missed this small hn posts. thanks
• hoppp 1y ago
  Seems to work :)
• ryandrake 1y ago
  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-preetham.pdf https://courses.cs.duke.edu/cps124/fall01/resources/p91-pree...
  • j_bum 1y ago
    Fun (but not fun) story :)
  • deleted 1y ago
    [deleted]
  • netsharc 1y ago
    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 1y ago
    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) https://en.wikipedia.org/wiki/Cobalt_(video_game)
• ianbicking 1y ago
  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 1y ago
    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 1y ago
  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 1y ago
  Opened this up and sat there for a good 20 seconds waiting for something to happen... only to remember it's midnight here.
  • dnlzro 1y ago
    Maybe someone smarter than me could add stars to the night sky, so it's not just black.
    • nativeit 1y ago
      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 1y ago
        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 https://github.com/mpetroff/nightsky
  • socalgal2 1y ago
    Suggestion for the author, I don't think there are any outdoor places where the sky is black. I don't know that gray would be any better. Stars? Some night clouds? or maybe even still a gradient? https://www.google.com/search?sca_esv=58e7983bf9f21fcd&udm=2&2&q=night+horizon+pictures+dessert&sa=X https://www.google.com/search?sca_esv=58e7983bf9f21fcd&udm=2...
• mlhpdx 1y ago
  Which direction am I looking? Deeper blue to the north.
  • dnlzro 1y ago
    It's always facing the sun (although it doesn't include the sun itself).
• i_love_retros 1y ago
  Curious why a celebration of HTML needed a full stack javascript framework?
  • dnlzro 1y ago
    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 1y ago
      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_ 1y ago
        (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
        • mcteamster 1y ago
          Depending on how "approximate" is acceptable, I've found that using timezone names can be a good proxy for location. As most users have their timezones set correctly it's more consistent and private than IP or GPS. I've made a library for my own use cases that does this (https://github.com/mcteamster/virgo https://github.com/mcteamster/virgo), but it's also pretty straightforward to parse the city/state name out of the timezone and look it up somewhere.
      • deleted 1y ago
        [deleted]
  • deleted 1y ago
• djoldman 1y ago
  @dlazaro, I believe that style={{backgroundColor: bottom}} is not needed in: <body style={{backgroundColor: bottom}}> </body> is not needed.
  • dnlzro 1y ago
    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-bars-28d75cd8cf7f https://medium.com/@evkirkiles/coloring-the-webkit-browser-b...
    • peterldowns 1y ago
      That's a cool thing to know, thanks for sharing. Great job on the sky site!
    • deleted 1y ago
      [deleted]
    • djoldman 1y ago
      Today I learned! Thanks
    • doughecka 1y ago
      Wow, this works in chrome on Android as well
• jhardy54 1y ago
  Super neat. Looking forward to checking out your implementation and learning about this!
• gdubs 1y ago
  Well, that's delightful. Works really well here in the Pacific Northwest :)
  • aysusu 1y ago
    [dead]
• esafak 1y ago
  More sophisticated than I expected. It relies on a research paper: https://github.com/ebruneton/precomputed_atmospheric_scattering https://github.com/ebruneton/precomputed_atmospheric_scatter...
• 101008 1y ago
  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 1y ago
  This would be an awesome background for a smart home dash!
  • fudged71 1y ago
    It would be awesome for a fake window in a basement
• mushufasa 1y ago
  would love this to be a desktop background -- linux or macOS
  • nathandaly 1y ago
    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.livewebwallpaper https://play.google.com/store/apps/details?id=com.nuko.livew...)
  • Leftium 1y ago
    I use a built-in MacOS wallpaper called Solar Gradients[1] It looks very similar! [1]: https://youtu.be/0mf8YaWN5qE?t=1m21s https://youtu.be/0mf8YaWN5qE?t=1m21s
• DonHopkins 1y ago
  Why doesn't it respect dark mode??? ;)
  • 8n4vidtmkvmk 1y ago
    Wait a few hours
• cosmicgadget 1y ago
  That is awesome but now I want to check what my SF bros see when they look up.
• cgijoe 1y ago
  Ooh, how about this as a live desktop wallpaper!
  • rafinha 1y ago
    Same!
• SeanAnderson 1y ago
  Oh nice, this is actually something I very specifically wanted for https://ant.care/ 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.
• michelreij 1y ago
  Beautiful, thank you!
• card_zero 1y ago
  Useful, saves me looking at the thing.
• mourner 1y ago
  Author of Suncalc here — this is exactly the kind of stuff I love to see my code being used in, thanks for sharing!
  • sheerun 1y ago
    Author or contributor? Great work, by the way, I love such shows
    • mourner 1y ago
      Wrote it 14 years ago! https://github.com/mourner/suncalc/ https://github.com/mourner/suncalc/ It's a bit neglected but I'll do some upkeep shortly...
  • gregsadetsky 1y ago
    Hey, small note that your excellent https://suncalc.net/ 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 https://github.com/protomaps/protomaps-leaflet Cheers
    • mourner 1y ago
      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.
• deleted 1y ago
  [deleted]
• therealfiona 1y ago
  Works in Hawaii.
  • cwmoore 1y ago
    Even at sunrise?
• fmbb 1y ago
  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 1y ago
  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 1y ago
  I like this, but I’m newly concerned about the unitary horizon.
• tinco 1y ago
  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 1y ago
    during the day it was good here, now that it is night it's a bit off for me too
• cloudfudge 1y ago
  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 1y ago
    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/ 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."
  • dnlzro 1y ago
    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/#supported-bindings https://developers.cloudflare.com/workers/wrangler/api/#supp... [2] https://developers.cloudflare.com/workers/runtime-apis/request/#incomingrequestcfproperties https://developers.cloudflare.com/workers/runtime-apis/reque...
    • cloudfudge 1y ago
      Great explanation; thanks.
    • Theodores 1y ago
• sudosteph 1y ago
  Looks pretty Carolina blue to me. Good job.
• verelo 1y ago
  Feels like this would be great for fake skylights…
• dehugger 1y ago
  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 1y ago
  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 1y ago
  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 1y ago
  Neat tool, would love to be able to set the location when the registered IP location isn’t accurate.
• ryukoposting 1y ago
  Would be cool if it considered current weather conditions. The sky is presently much grayer than what the site showed me.
• jaharios 1y ago
  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...
• jclarkcom 1y ago
  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_measurement.jpg https://www.innerscene.com/built_pages/cs_specsheet/cct/cct_... A bit more info as well: https://www.innerscene.com/SpecHelp/CircadianSky/cct/cct.html https://www.innerscene.com/SpecHelp/CircadianSky/cct/cct.htm...
• meatjuice 1y ago
  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.
• lazystar 1y ago
  sunsetting in the monroe, wa area. only a month left to live out here, gonna miss it dearly
• dddgghhbbfblk 1y ago
  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!
• ComputerGuru 1y ago
  Ahhh you’re not taking light pollution into account!
• natewww 1y ago
  that is really cool, thanks for sharing
• kylegalbraith 1y ago
  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.
• jama211 1y ago
  Ok this is incredible, it was exactly right, I did a double take!
• mcintyre1994 1y ago
  This is really cool! And from skimming your code, TIL about Math.hypot!
• tcumulus 1y ago
  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!
• fastasucan 1y ago
  This might be a stupid question, but is it the background of https://html.energy/html-day/2025/index.html 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/ https://sky.dlazaro.ca/ OP - put it in the HN post and first on your github repo! Good work.
• Biganon 1y ago
  Not often does a project make me think "adorable", and it's a compliment. Just lovely.
• leokennis 1y ago
  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/c8ba254a0272453cbe39357b144d0fa3 https://www.icloud.com/shortcuts/c8ba254a0272453cbe39357b144... Just make sure that your last (or only) iDevice Home Screen is set to type “image”.
• skyzouwdev 1y ago
  [dead]
• CodeVerseEx 1y ago
  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.
• aqua_worm_hole 1y ago
  [dead]
• chrz 1y ago
  Fully black web page for me here. Well its correct
• 2OEH8eoCRo0 1y ago
  My sky is blue and orange right now though and your site shows black.
• jama211 1y ago
  This would be cool on a fake window for your house, like a screen in a basement
• bigwheels 1y ago
  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 :)