Hi everyone,
I just wanted to share a little project I’ve been working on called the Atmospheric Weather Card.
It’s a visual card that uses a canvas to add some nice weather visuals to your dashboard. It basically takes your home image and layers dynamic weather effects around it. Things like organic clouds, rain, snow, and the current moon phase. It also has some special effects like shooting stars.
Disclaimer: I did use AI to help me create this card.
I hope you find it fun to use!
Thanks for the heads up. Did you show your chat for others to build on that?
Hi there, I’m not sure what you mean with “did you show your chat for others”?
Your conversation and responses, so others can replicate your efforts and further contribute.
The prompts are basically just hundreds of tiny, messy iterations focused on fine tuning the visuals, things like cloud density, color contrasts and particle speeds. Since 99% of the work was just getting the weather visuals look good, the chat logs wouldn’t be very helpful I think. But the comments in the code are super verbose and explain all the details and approaches clearly.
There’s also a tutorial with a template prompt in the repo for creating the house image
Thanks for this card, this is in my opinion the best looking weather card, I love the graphics and animations! Although has gotten quite an ordeal to configure (probably necessary for how configurable it is!)
Is it possible to add another chip next to the one of the bottom left? Like if I want to a sunup and sundown time chips next to it, is that possible? I can't figure it out unless i hard code the position, but the weather text may be different lengths depending on the text.
Also it seems like the unit_format option isn't applying to the minimum temp line in the forecast chip.
- type: custom:atmospheric-weather-card
weather_entity: weather.openweathermap
theme: auto # Change to 'light' or 'dark' if your theme is always the same color
card_style: standalone
card_height: 110
perf_mode: low
sun_moon_x_position: -250
sun_moon_y_position: 55
sun_entity: sun.sun
chip_area_position: top-right
chip_text_size: 14px
chip_text_gap: 1px
chip_label_size: 11px
chip_area_layout: horizontal-scroll
chip_area_scroll_count: 3
chip_area_align: center
chip_area_width: 180px
chip_area_height: 100%
chip_padding: 0px
chip_area_padding: 0px
chip_area_gap: 2px
chip_gap: 0px
chip_icon_padding: 0px
chip_style: vertical
chip_area_background: true
chip_area_grouped: true
chip_area_separator: true
chip_icon_background_color: rgba(255,255,255,0.55)
chip_icon_background: false
chips:
# Temperature
- entity: weather.openweathermap
position: custom
position_anchor: top-left
position_y: 16px
text_size: 48px
hide_icon: true
attribute: temperature
background: false
position_x: 16px
padding: 0px 8px
fancy_unit: true
value_weight: "700"
# Weather Text
- entity: weather.openweathermap
position: custom
position_anchor: bottom-left
hide_icon: true
position_x: 16px
position_y: 16px
padding: 0px 8px
background: false
# Forecast Day Today
- entity: weather.openweathermap
forecast: daily
attribute: temperature
icon: weather
forecast_precision: 0
unit_format: °
forecast_show_min: true
forecast_low_position: below
# Forecast Day 1
- entity: weather.openweathermap
forecast: daily
forecast_offset: 1
attribute: temperature
icon: weather
forecast_precision: 0
unit_format: °
forecast_show_min: true
forecast_low_position: below
# Forecast Day 2
- entity: weather.openweathermap
forecast: daily
forecast_offset: 2
attribute: temperature
icon: weather
forecast_precision: 0
unit_format: °
forecast_show_min: true
forecast_low_position: below
# Forecast Day 3
- entity: weather.openweathermap
forecast: daily
forecast_offset: 3
attribute: temperature
icon: weather
forecast_precision: 0
unit_format: °
forecast_show_min: true
forecast_low_position: below
# Forecast Day 4
- entity: weather.openweathermap
forecast: daily
forecast_offset: 4
attribute: temperature
icon: weather
forecast_precision: 0
unit_format: °
forecast_show_min: true
forecast_low_position: below
# Forecast Day 5
- entity: weather.openweathermap
forecast: daily
forecast_offset: 5
attribute: temperature
icon: weather
forecast_precision: 0
unit_format: °
forecast_show_min: true
forecast_low_position: below
tap_action:
action: more-info
entity: weather.openweathermap
card_mod:
style: |
ha-card {
border-width: 0px !important;
}
Hi, and thanks for the nice words! 
You can use the "free position" chip feature, but as you noticed, that gets tricky with more than one chip because of the varying widths. Giving the first chip a fixed width could be used as a workaround. The new sub-value feature could also work as additional text for the chip with the large text you already use. It's also possible to use a custom sensor that combines different data; this works nicely with the scrolling text feature.
There will probably be an option to create different chip areas in the future, which will make this much easier.
Also, just as a note: I am currently completely changing the style and direction of the card, since I got tired of managing the complex weather animations. The upcoming version will be a very different, much simpler card, and the focus will be more on the weather data. So, I guess for users who like the animations, the current version will be the last one that supports them.
Hi all, after the latest update there is only atmosphere but no more card.
Hi there. The card was completely reworked in V5. This means the configuration is very different now, so your previous config will not work anymore. The README and release notes actually cover this in detail and provide new examples.
That being said, this might not matter much anymore, as I have just decided to archive this repository due to a loss of motivation. Getting the card from 4.5 to the much cleaner 5.0 was an incredible amount of work. I actually debated archiving the repo for days after 4.5 because maintaining the code was getting too complicated with all the issues. I pushed through, but realizing the new version isn't well received drained whatever motivation I had left. I will continue developing it in private.
If you want to keep using the card, you can update your config using the V5 notes, just create a new card from the card picker which gives you the default card, or consider forking the project. Anyway, thanks for being a user of my card.
Oh, that's a shame. I hadn't got around to updating from v4.5 to v5.0 because of the breaking changes. I wanted to test it out when I had more time. I went to visit your repo only to find it missing, not just archived. v4.5 still works so I'll stick with that. I'd also been testing Nimbus Weather Card but recently uninstalled that since I decided that I preferred your card.
Can't use the notes since the repository was taken down. Also means nobody will be able to find the documentation for tweaks on the card.
I second @guardian1691's motion to at least keep the documentation online so we can still use V4.5 or in my case V4.4, please...
Hey, yeah... I originally intended to just archive the repo, but I ended up deleting my github account instead. I might release the version I keep working on under a new name eventually, but for now I've lost the motivation to maintain a public project. The old repo and its docs are gone, sorry about that.
I've made a backup \ fork of his fantastic work.
Hope it's okay if I share this.
I also think it's sad that this project has been discontinued, but you also have to accept the reason behind it. I wish him all the best and really hope that he might start this project again. It was the best weather card in a long time.
GitHub - whyisthisbroken/atmo-weather-card: Animated weather card for Home Assistant · GitHub
EDIT:
Just to be clear: I'm not offering active support for this — I'm mainly developing this further for myself, and I'll share the updates here as I go. There will be no HACS support for now, or any other distribution method beyond manual installation via the repo.
I've now released Version 6, based on the original Version 4.5. All previous versions (including V5) are still available in the repo for anyone who prefers them.
Of course, I'd be more than happy if shpongledsummer decided to jump back in at some point 
But that's entirely up to him.
V6 is a reworked version with a few notable changes:
atmo-weather-card / atmo-weather-card-editor)perf_fps), replacing the previous fixed ~30 FPS animation loop — overall performance handling was massively improved, including incremental chip rendering and clamped/validated performance valuescard_height, chip width/height, performance settings)Feel free to check it out if you're interested, and as always, all credit for the original work goes to the original author shpongledsummer
Why not make the repo addable as a custom repo in HACS?
HACS custom repository support is now implemented:
Thanks whyisthisbroken for keeping the project going.
I’ve downloaded Atmo Card via HACS, and it shows up fine in my dashboard, but it doesn’t seem to be picking up the weather entity properly and is just showing NaN or N/A. Does anyone know why this might be? I can’t see any errors in the Log and all my other weather cards (Hourly Weather, Clock Weather) work fine with the same weather entity. Thanks in advance.
type: custom:atmo-weather-card
weather_entity: weather.openweather
sun_entity: sun.sun
moon_phase_entity: sensor.moon_phase
theme_entity: sun.sun
card_style: standalone
card_height: 130
card_padding: 16px
celestial_size: 50px
celestial_position: fixed
celestial_alignment: right
celestial_x: 45
celestial_y: center
chip_area_position: bottom-left
chip_text_size: 12px
chip_padding: 6px 10px
chip_gap: 8px
chip_area_background: true
perf_mode: ultra
perf_fps: 60
animation_speed: 0.3
bird_animation_speed: 1
star_animation_speed: 1
perf_cloud_quality: 2
perf_effects: 2
perf_fauna: 2
perf_dpr: 2
fauna_bird_density: 1.5
fauna_plane_density: 1.5
fauna_bird_flock_size: 12
fauna_birds_at_night: false
chips:
- entity: weather.openweathermap
attribute: temperature
position: custom
position_anchor: top-left
position_x: 16px
position_y: 16px
text_size: 34px
background: false
padding: 0px 4px
hide_icon: true
hide_label: true
fancy_unit: true
value_weight: "600"
behind_effects: true
- entity: weather.openweathermap
attribute: humidity
name: HMD
- entity: weather.openweathermap
attribute: wind_speed
name: Wind
grid_options:
rows: auto
columns: full
Sorry for the late reply. I can’t test this myself, as I don’t use OpenWeather. I have registered now, and once the API is activated, I will give it a try. Would you also be able to test it with a different weather provider to confirm it works there as well?
In the future, please open a Discussion or Issue on GitHub, as I am not very active here in the forum.
EDIT:
So, I took your YAML code and pasted it. It works…
Must be a problem with your entity or OpenWeather API. I use “current” in the integration settings.
Thanks for responding, I’ll try creating a new entity and see if that works, and report back here in case anyone sees the same.
Quick update: still the same when using a different weather integration. Added more details in a GitHub issue as suggested and now trying removing/reinstalling the card.
