[JS+Editor Module] Bubble Weather

[Clooos]

Bubble Weather

Version: v1.1.0
Creator: Clooos

Important

Supported cards:

• Button

Turn any Bubble Card button into a minimalist weather card with animations, simple forecasts, and layouts that fit your dashboard.

• Daily, hourly, or twice-daily forecasts with automatic sizing
• Weather-based animations with rain, snow, hail, clear night with stars...
• Multiple layouts like "Square card", "Weather only", "Background only"...
• And more!

How to use

To use this module, create a new Button card, set the button type to "State", choose any "weather" entity, and the module takes care of the rest.

---

Configuration

weather_forecast:
  type: daily                 # daily, hourly, or twice_daily
  max_days: 5                 # how many items to show
  min_day_width: 60           # adjusts grid width
  card_layout: weather_only   # default, square, weather_only_bg, weather_only, background_only or background_only_minimal
  disable_dynamic_background: false
  disable_animations: false

---

🧩 Get this Module

If you like this module and want to support my work, you can find it on my Patreon. Bubble Card keeps growing, and your support helps me spend more time adding new features and fixing bugs ❤️

By joining my Patreon, you also get access to all my other exclusive modules!

A big thank you to everyone already supporting me. Your messages and feedback mean a lot and really push me to keep improving Bubble Card and releasing new features for free for the community. Cheers! 🍻

---

How to install

1. Download the module
   Download the YAML file for this module from the bottom of the Patreon post.

   

2. Open your Bubble Card editor
   Go to the card where you want to use the module.

3. Import the module
   In the Modules section of the editor, click on Import from YAML, paste the contents of the downloaded YAML file, then click Import Module.

4. Configure as needed

---

Screenshot:

Bubble.Weather.Clouds.preview.mp4

[Christinxa]

Firefox strikes again. 🫠 The weather card looks perfect on Chrome and Android, but the background layout is broken in Firefox.

The issue appears specifically on this element: div.bubble-background.bubble-action.bubble-action-enabled.bubble-button-background
It seems to be caused by position: relative; within the .bubble-background class.

Firefox:

Element {
    opacity: 0.5;
    position: relative;
    inset: 0px;
    width: 100%;
    height: 100%;
    background-image: ...
}

Chrome:

element.style {
    opacity: 0.5;
    inset: 0px;
    width: 100%;
    height: 100%;
    background-image: ...
}

When I unchecked position: relative; in the Firefox developer tools, the card rendered correctly immediately.

[Clooos]

Damn! I had fixed that in Firefox and probably forgot to save my changes! I will fix this right now 😄

[Clooos]

I just fixed this! Thank you for the feedback!

[Clooos]

Bubble Weather v1.0.1

• Fixed a CSS issue in Firefox
• Full compatibility with v3.0.X

[Clooos]

Bubble Weather v1.0.2

• Added a new "Weather only" layout that don't hide the background of the card

[Christinxa]

Hey again! I noticed a small behavior regarding the dynamic background in Daily mode.

Since many weather integrations (like DWD) timestamp their daily forecast at 00:00 for the current day, the card interprets the first entry as "night" (hour < 6). This results in a night background even during the day.

Maybe for type: daily, it would be better to check the current system time instead of the forecast timestamp?

By the way, I really love this module, it looks absolutely stunning! 😍

[Clooos]

I will check that!

[Clooos]

This should be now fixed 🤞

[Christinxa]

It is, thank you! 😊

[Rustymage]

Just to check I'm not being daft, this is a paid module for Bubble Card?

[Clooos]

Hi! Yes, this module is available only to Patreon subscribers 🙂

I truly hope you understand.

[Rustymage]

You don't need to justify monitising your work 👍

[Rustymage]

I have subscribed and have the module now. Is the update process manual via copy/paste from Patreon or am I being daft again?

[Clooos]

Yes, these are the steps that are described above, there is no easier way currently.

And thank you so much for your support! 😄

[Clooos]

Bubble Weather v1.0.3

• Added two new layouts, "Background only (hide weather)" and "Background only (hide weather and header)"
• Fixed an issue where the card could be in night mode incorrectly

[Claeysjens]

Hey! I can’t get any of the background animations in this card to work.
When it's raining, pouring, or clouded, nothing happens.

[Clooos]

I've indeed broke something by fixing the night mode in v1.0.3. In this version, the animations are only visible by day, I will fix that 👌

[Clooos]

This is now fixed in v1.0.4 😄

[Clooos]

Bubble Weather v1.0.4

• Fixed the animations at night
• Fixed the timezone issues

[Clooos]

Bubble Weather v1.0.5

• Fixed an issue that was blocking the max number of days to 4 in some cases

[Clooos]

Bubble Weather v1.0.6

• Fixed another issue with the night mode
• The number of days/hours is correctly adapting to the card size (like in previous versions)

[Clooos]

Bubble Weather v1.1.0

• Added (sexy) cloud animations that adapt to the wind speed
• Added an option to hide the main icon background
• Some more improvements

Bubble.Weather.-.Clouds.preview.mp4

[alexanderdominicnesbitt]

I love that you've made them dynamic to wind speed. Such a legend!!

[Christinxa]

It's looking gorgeous. 😍

[kelbertpaul]

It's so nice, amazing

[alexanderdominicnesbitt]

Hey @Clooos , what is the best way of updating these patron modules? I assumed I could edit the existing module and replace the YAML code but doesn't look like it - I went and updated the YAML in the homeassistant/bubble_card/modules/weather_forecast.yaml but not seeing any change in the Module after a restart - still says update available.

The only options I see is to import as a new module, remove the old and reconfigure.

[Rustymage]

Hey @Clooos , what is the best way of updating these patron modules? I assumed I could edit the existing module and replace the YAML code but doesn't look like it - I went and updated the YAML in the homeassistant/bubble_card/modules/weather_forecast.yaml but not seeing any change in the Module after a restart - still says update available.

The only options I see is to import as a new module, remove the old and reconfigure.

I add it as a new module and it appears to successfully replace the old one and anything existing on the dashboard.

[Clooos]

This is the way 👌

[alexanderdominicnesbitt]

Perfect - thanks!

[aSloppyJo3]

Love this! Thanks for all of your hard work @Clooos ! Quick question, is there a way to format the hours to show in a 12H format, ie. ... 11, 12, 1, 2... or even ...11:00, 12:00, 1:00, 2:00... Would be great for my not so inner control freak.

[Clooos]

Hi! I will definitely fix this when I have more time 😄

[alexanderdominicnesbitt]

Make sure you hit import module (not save)

…

On Sat, 27 Dec 2025 at 09:38, Fatlum ***@***.***> wrote: Im new to HA so maybe you could help me. Im trying to add it to my bubble card but dont know how. Ive tried adding this as a custom module but everytime after saving the module dissapears. Could you please help me? — Reply to this email directly, view it on GitHub <#1987 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A37KH44TLRKO6ODPFN36NDT4DZHRBAVCNFSM6AAAAACOKFWV2OVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTKMZVGEYTSNQ> . You are receiving this because you commented.Message ID: ***@***.***>

[PlanetCitizen1829381]

Hi @Clooos,
Let's start by saying you are a genuine legend. Congrats on the new addition to your family and my hats' off to you that you are even still responding to people across all platforms.
The weather module is a thing of beauty so a few thoughts which could be completely user error here, but just thought I would ask our Bubble Creating Guru :-)

1. I have two bubble cards for this weather module. When using one hourly, the hours etc align as expected however, when using it with the daily option and a data feed based on daily, the current day isn't aligned with the other days. Not sure if this is dependant on which weather data integration it feed from as I tried a few and can't replicate it, but in this instance where it isn't quite right, I am using the Bureau of Meteorology integration.

2. Do the animations only change based on the full day forecast only? As an example, if rain is forecast for that day, it will show as rainy and the rain animation all day. However the precipitation for the area might only occur for one hour some time later in the day and only a few millimetres of rain. But the rest of the day, the precipitation might be 0 millimetres. Idealy the animation and condition ie sun, rain, wind etc, would reflect as it updates as well as the animation. Appreciate the weather module might be a minimalist card and therefore this item may be more a suggestion for future enhancements.
   

[Clooos]

Hi! I've used OpenWeatherMap exclusively for my tests and I haven't your issues, so I guess this depends on the weather integration you use. For example on mine, the weather animation is changing all day depending on the weather condition (if the state is rainy, the rain animation is displayed). Also on mine I have the low temperature displayed for the current day so I haven't the alignment issue as well (but I could fix this specific case, I was not aware this could be a thing).

Oh and thank you so much for the kind words! 😄

[PlanetCitizen1829381]

And this is why you are the best and am happy to be a Patreon supporter of you!
I will have a play around with OpenWeatherMap as you indicated, it might be integration related.
And definitely no rush. Family first good sir!

[PlanetCitizen1829381]

@Clooos I don't know if you did something on your end but the animations seem to be dynamically updating throughout the day/night now as you originally designed :-). Occasionally the current day & temperature still drops in the first image I shared. But I can definitely live with that. Oh and working well with the Bureau of Meteorology integration. So thanks if you did something! Thanks if you didn't! Thanks for being a legend either way!

[Clooos]

I haven't changed anything, but I'm glad to read that! 😄

[seaton88]

Embarrassingly I cannot for the life of me configure this card! I'm using with the Google Weather integration, but no joy... grateful for someone to point out the obvious error

[alexanderdominicnesbitt]

Try using openweather map instead - Sent from Outlook for Android<https://aka.ms/AAb9ysg>

…

________________________________ From: seaton88 ***@***.***> Sent: Sunday, February 8, 2026 10:24:16 PM To: Clooos/Bubble-Card ***@***.***> Cc: alexanderdominicnesbitt ***@***.***>; Comment ***@***.***> Subject: Re: [Clooos/Bubble-Card] [JS+Editor Module] Bubble Weather (Discussion #1987) Embarrassingly I cannot for the life of me configure this card! I'm using with the Google Weather integration, but no joy... grateful for someone to point out the obvious error image.png (view on web)<https://github.com/user-attachments/assets/5ddd54ca-4b16-4439-954e-06038e1a76fa> — Reply to this email directly, view it on GitHub<#1987 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/A37KH4ZCLL3M7HK5UZGTGU34K6ZRBAVCNFSM6AAAAACOKFWV2OVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTKNZTG4YTENA>. You are receiving this because you commented.Message ID: ***@***.***>

[seaton88]

same unfortunately

[alexanderdominicnesbitt]

Do you have the weather module installed? You need to be a patron supporter to get the module code. Here is my card code:

My card code:

type: custom:bubble-card
card_type: button
button_type: state
modules:
  - weather_forecast
entity: weather.openweathermap
weather_forecast:
  type: daily
  max_days: 7
  card_layout: default
  disable_dynamic_background: false
  hide_icon_background: true
scrolling_effect: false
show_name: false
show_last_changed: false
show_attribute: true
attribute: temperature
sub_button:
  main:
    - entity: weather.openweathermap
      show_attribute: false
      show_last_changed: true
      state_background: false
      show_background: false
      show_icon: false
      attribute: precipitation_unit
      show_state: false
      show_name: false
  bottom: []
grid_options:
  columns: full
  rows: 3
visibility:
  - condition: screen
    media_query: "(min-width: 768px)"
slider_fill_orientation: left
slider_value_position: right

[seaton88]

Thanks all...I did have it installed, but re-installing the module worked! :)

[DerHerzog7]

Any chance we can get some optional customisation of which sensors to assign to which attributes? The BoM api can be weird but by choosing some different sensors it makes it more consistent.

[mbchristoff]

Love bubble weather! I abused this to create a google hub like dynamic wallpaper.

[mihaplus]

Awesome! How did you do that?

[mbchristoff]

I stacked the bubble weather with a time card in the top left corner and used cardmod to stretch it out to the full screen.
You might be able to skip the grid layout I used but this allowed me to not have an empty space where the bubble card would have been.
Would be awesome to have a native-ish implementation, but for now this will do.
Here's the code for the stack, be wary because it's not pretty:

type: custom:layout-card
layout_type: custom:grid-layout
layout: {}
cards:
  - type: custom:bubble-card
    card_type: button
    button_type: state
    sub_button:
      main: []
      bottom: []
    entity: weather.buienradar
    modules:
      - weather_forecast
    weather_forecast:
      card_layout: background_only_minimal
    slider_fill_orientation: left
    slider_value_position: right
    grid_options:
      columns: 24
      rows: 12
    card_mod:
      style: |
        ha-card {
          background: none;
          box-shadow: none;
          border: none;
          width: 1050px;
          height: 800px !important;
          margin-top: -50px;
          margin-left: -50px !important;
        }
  - type: custom:better-moment-card
    parentStyle: |
      line-height:normal;
    moment:
      - parentStyle: |
          font-size:6.8em;  text-align:center; font-weight:400;
        templateRaw: |
          {{moment format=HH:mm:ss}}
      - parentStyle: |
          font-size:1.9em; text-align:center; margin-top:5px;
        templateRaw: |
          {{moment format=cccc, dd LLLL}}
    grid_options:
      columns: 12
      rows: 3
    card_mod:
      style: |
        ha-card {
          background: none;
          box-shadow: none;
          border: none;
          margin-top: -775px;
          margin-left: -575px !important;
        }
        h1.card-header {
          padding: 0px;
        }
        div#states.card-content {
          padding: 0px;
        }
grid_options:
  columns: 12
  rows: 3