Home Assistant

This is an automated archive made by the Lemmit Bot.

The original was posted on /r/homeassistant by /u/Wtrdk_ on 2025-11-21 13:42:40+00:00.

Hey everyone!

'Tis the season to clutter your Home Assistant dashboard with absolutely essential features that have zero practical value whatsoever!

Time to add this delightfully useless (but oddly satisfying) snowflake animation to your setup. Just slap it on as a card, optionally with a condition if you're the responsible type who thinks "maybe I don't need snow in July" (see my example for reference), and watch those beautiful snowflakes dance across your screen like tiny frozen pixels of pure holiday joy.

Will it help you automate your home? Nope. Will it make your dashboard load 0.2 seconds slower? Probably. Will it spark joy? Absolutely.

Your smart home doesn't know it needs this yet, but trust me—it does. Because nothing says "I've mastered home automation" quite like adding digital weather effects to your thermostat controls.

Happy dashboarding, and may your automations be merry and bright!

NB, to be clear, the code is created by u/Possible-Week-5815, I'm just promoting his work

Gif: https://gifyu.com/image/b9cr1

type: conditional
conditions:
  - entity: input_boolean.christmasmode
    state: "on"
card:
  type: custom:html-card
  card_mod:
    style: |
      .type-custom-html-card, htmlCard {
        position: absolute;
        top: -20px!important;
        background:none!important;
        }
  content: |
    <style>
      .snowflakes {
        position: fixed;
        top: -10%;
        left: 0;
        width: 100%;
        height: 110%;
        pointer-events: none;
        z-index: 9999;
        overflow: hidden;
      }

      i,
      i:after,
      i:before {
        background: white;
      }

      i {
        display: inline-block;
        -webkit-animation: snowflakes 6s linear 4s infinite;
        -moz-animation: snowflakes 6s linear 4s infinite;
        position: relative;
      }

      i:after,
      i:before {
        height: 100%;
        width: 100%;
        content: ".";
        position: absolute;
        top: 0px;
        left: 0px;
        -webkit-transform: rotate(120deg);
      }

      i:before {
        -webkit-transform: rotate(240deg);
      }

      @-webkit-keyframes snowflakes {
        0% {
          -webkit-transform: translate3d(0, 0, 0) rotate(0deg) scale(0.6);
        }

        100% {
          -webkit-transform: translate3d(15px, 1200px, 0px) rotate(360deg) scale(0.6);
        }
      }

      .snowflakes i:nth-child(3n) {
        width: 16px;
        height: 4px;
        -webkit-animation-duration: 8s;
        -webkit-animation-iteration-count: infinite;
        -webkit-transform-origin: right -45px;
      }

      .snowflakes i:nth-child(3n+1) {
        width: 24px;
        height: 6px;
        -webkit-animation-duration: 15s;
        -webkit-animation-iteration-count: infinite;
        -webkit-transform-origin: right -30px;
      }

      .snowflakes i:nth-child(3n+2) {
        width: 32px;
        height: 8px;
        -webkit-animation-duration: 20s;
        -webkit-animation-iteration-count: infinite;
        -webkit-transform-origin: right -15px;
      }

      /* different delays so they don't all start at the same time */
      .snowflakes i:nth-child(7n) {
        opacity: .1;
        -webkit-animation-delay: 1s;
        -webkit-animation-timing-function: ease-in;
      }

      .snowflakes i:nth-child(7n+1) {
        opacity: .2;
        -webkit-animation-delay: 1s;
        -webkit-animation-timing-function: ease-out;
      }

      .snowflakes i:nth-child(7n+2) {
        opacity: .3;
        -webkit-animation-delay: 1.5s;
        -webkit-animation-timing-function: linear;
      }

      .snowflakes i:nth-child(7n+3) {
        opacity: .4;
        -webkit-animation-delay: 2s;
        -webkit-animation-timing-function: ease-in;
      }

      .snowflakes i:nth-child(7n+4) {
        opacity: .5;
        -webkit-animation-delay: 2.5s;
        -webkit-animation-timing-function: linear;
      }

      .snowflakes i:nth-child(7n+5) {
        opacity: .6;
        -webkit-animation-delay: 3s;
        -webkit-animation-timing-function: ease-out;
      }

      .snowflakes i:nth-child(7n+6) {
        opacity: .7;
        -webkit-animation-delay: 3.5s;
        -webkit-animation-timing-function: ease-in;
      }
    </style>
    <div class="snowflakes">
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
    </div>