From 1d8437766a4a0d378f462d8a1c1efca06caf4992 Mon Sep 17 00:00:00 2001
From: Chris <stuurmcp@telkomsa.net>
Date: Mon, 5 May 2025 22:51:56 +0200
Subject: [PATCH] Improved custom:mushroom-chips-card for home-assistant

---
 home-assistant/card_mod                       |  0
 .../mushroom chips card - animated.yml        | 22 +++++++++++++++++++
 2 files changed, 22 insertions(+)
 create mode 100644 home-assistant/card_mod
 create mode 100644 home-assistant/mushroom chips card - animated.yml

diff --git a/home-assistant/card_mod b/home-assistant/card_mod
new file mode 100644
index 0000000..e69de29
diff --git a/home-assistant/mushroom chips card - animated.yml b/home-assistant/mushroom chips card - animated.yml
new file mode 100644
index 0000000..db77949
--- /dev/null
+++ b/home-assistant/mushroom chips card - animated.yml	
@@ -0,0 +1,22 @@
+type: custom:mushroom-chips-card
+alignment: justify
+chips:
+  - type: template
+    entity: binary_sensor.motion_detected
+    icon: "{{ state_attr(\"binary_sensor.motion_detected\", \"icon\") }}"
+    icon_color: |
+      {% set lc = (as_timestamp(now()) - as_timestamp(states.binary_sensor.motion_detected.last_changed))|int %} {{ "#ff0000" if lc < 10 }} {{ "#4d061c" if lc >= 10 and lc < 20 }} {{ "#d2042d" if lc >= 20 and lc < 45 }} {{ "#fA8072" if lc >= 45 and lc < 90 }} {{ "#ff8c00" if lc >= 90 and lc < 180 }} {{ "#ffa500" if lc >= 180 and lc < 400 }} {{ "#fff700" if lc >= 400 and lc < 830 }} {{ "#ffff00" if lc >= 830 and lc < 1725 }} {{ "#008000" if lc >= 1725 and lc < 3600 }} {{ "#4682B4" if lc >= 3600 and lc < 21600 }}
+    content: >
+      {{ states['binary_sensor.motion_detected'].state | title }} · {{ states['binary_sensor.motion_detected'].last_changed | relative_time }}
+    label: "{{states['binary_sensor.motion_detected'].name}}"
+    tap_action:
+      action: more-info
+card_mod:
+  style:
+    mushroom-template-chip:nth-child(1)$: |
+      ha-state-icon {
+        {{ 'animation: clip 2s linear infinite;' if is_state('binary_sensor.motion_detected', 'on') }}
+      }
+      @keyframes clip {
+        50% { clip-path: polygon(0 0, 61% 0, 66% 100%, 0% 100%); }
+      }
\ No newline at end of file