I’ve been working on this weather dashboard for a couple years now, and wanted to discuss it with you guys. Here it is:

https://zima.prokofyev.ch/?token=7f7e9e7ca3msh1f401291ce0855... [1]

A couple videos are available here:

https://www.loom.com/share/881b4a93441141429d9260c46f098b13

https://www.loom.com/share/845b6efd7ac645768b103d05c4993072

https://www.loom.com/share/6ede6a39452a4aefabad3a059d0e33ca

There is also a playground where you can test different weather conditions and time of the day (not every weather condition/combination might work): https://zima.prokofyev.ch/test?token=7f7e9e7ca3msh1f401291ce...

The idea of a dashboard comes from this wonderful Animated Weather Cards on codepen: https://codepen.io/ste-vg/pen/GqaZbo. I have quickly built the first version of the dashboard by patching up OpenWeather api and making a separate card for the next 5 days: https://starport.prokofyev.ch/dashboard/?token=7f7e9e7ca3msh...

Then I added rising/setting sun background animation based on the CSS Sunset Sunrise codepen, which is synchronized to the actual sunrise at a given location. The sun on each card also rises and sets accordingly (and the moon comes shortly after). I have also replaced 3 layers of clouds with sort of cloud-shape-like objects. This allows for easier tinting based on time of the day and better depiction of the cloud conditions (few clouds, broken clouds, etc.).

Unfortunately, svg animations from the original codepen were quite heavy on the resources, and as I wanted to run this thing on raspberry PI, it was too slow at around 15 FPS. So I reimplemented rain, snow and clouds using webgl canvas with PIXI.JS and also upgraded TweenMax to GSAP 3. That boosted the FPS rate to around 30.

Anyway, I am looking for any feedback on this. Does it look good to you? Would you use something like this at home? What other features could be useful on such a board? Do you think it has a market?

[1] This is a temporary token that has a request count limitation, if the page doesn't show anything anymore, you need to create your own token from rapidapi by subscribing to this API (there is a free plan):

https://rapidapi.com/faraway-technologies-faraway-technologi...

P.S. I am not a professional front-end dev, I have never worked on any public-facing projects, only hobby and internal tools, so things might be a bit rough on the edges.