From 3a8a95472b2b36ffeac4fe80793bdc519604f0e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?MARETTE=20C=C3=A9dric?= <cedric@marette.be>
Date: Tue, 7 Apr 2026 21:01:05 +0200
Subject: [PATCH 1/2] Add possibility to disable animation

---
 README.md          |  3 +++
 src/config.ts      |  1 +
 src/styles.css     | 14 +++++++-------
 src/types.ts       |  1 +
 src/vacuum-card.ts |  3 ++-
 5 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 5fc1d105..20833729 100644
--- a/README.md
+++ b/README.md
@@ -114,6 +114,7 @@ Here is what every option means:
 | `map`            | `string`  | Optional     | An entity_id within the `camera` domain, for streaming live vacuum map.                                   |
 | `map_refresh`    | `integer` | `5`          | Update interval for map camera in seconds                                                                 |
 | `image`          | `string`  | `default`    | Path to image of your vacuum cleaner. Better to have `png` or `svg`.                                      |
+| `animated`       | `boolean` | `true   `    | Animate the image when cleaning or returning to base.                                                     |
 | `show_name`      | `boolean` | `true`       | Show friendly name of the vacuum.                                                                         |
 | `show_status`    | `boolean` | `true`       | Show status of the vacuum.                                                                                |
 | `show_toolbar`   | `boolean` | `true`       | Show toolbar with actions.                                                                                |
@@ -203,6 +204,8 @@ I've added some animations for this card to make it alive. Animations are applie
 | :---------------------------------: | :-----------------------------------: |
 | ![Cleaning anumation][cleaning-gif] | ![Returning anumation][returning-gif] |
 
+This can be disabled by using the "animated" attribute.
+
 ## Supported languages
 
 This card supports translations. Please, help to add more translations and improve existing ones. Here's a list of supported languages:
diff --git a/src/config.ts b/src/config.ts
index 4f3f07cd..5ed3018f 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -23,6 +23,7 @@ export default function buildConfig(
     map: config.map ?? '',
     map_refresh: config.map_refresh ?? 5,
     image: config.image ?? 'default',
+    animated: config.animated ?? true,
     show_name: config.show_name ?? true,
     show_status: config.show_status ?? true,
     show_toolbar: config.show_toolbar ?? true,
diff --git a/src/styles.css b/src/styles.css
index 3183d172..52b28d10 100755
--- a/src/styles.css
+++ b/src/styles.css
@@ -178,16 +178,16 @@ ha-card {
   filter: brightness(0.9);
 }
 
-.vacuum.on,
-.vacuum.cleaning,
-.vacuum.auto,
-.vacuum.spot,
-.vacuum.edge,
-.vacuum.single_room {
+.vacuum.animated.on,
+.vacuum.animated.cleaning,
+.vacuum.animated.auto,
+.vacuum.animated.spot,
+.vacuum.animated.edge,
+.vacuum.animated.single_room {
   animation: cleaning 5s linear infinite;
 }
 
-.vacuum.returning {
+.vacuum.animated.returning {
   animation: returning 2s linear infinite;
 }
 
diff --git a/src/types.ts b/src/types.ts
index 0ae8b5cb..d3b7ee4c 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -66,6 +66,7 @@ export interface VacuumCardConfig {
   map: string;
   map_refresh: number;
   image: string;
+  animated: boolean;
   show_name: boolean;
   show_status: boolean;
   show_toolbar: boolean;
diff --git a/src/vacuum-card.ts b/src/vacuum-card.ts
index 4f536f8d..d9d5e8a0 100755
--- a/src/vacuum-card.ts
+++ b/src/vacuum-card.ts
@@ -335,10 +335,11 @@ export class VacuumCard extends LitElement {
 
     const src =
       this.config.image === 'default' ? DEFAULT_IMAGE : this.config.image;
+    const animated = this.config.animated ? ' animated' : '';
 
     return html`
       <img
-        class="vacuum ${state}"
+        class="vacuum ${state}${animated}"
         src="${src}"
         @click="${() => this.handleMore()}"
       />

From 88c2f66fc4a0608edb6646bfc98c9854409d554f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?MARETTE=20C=C3=A9dric?= <cedric@marette.be>
Date: Tue, 7 Apr 2026 21:02:01 +0200
Subject: [PATCH 2/2] typo

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 20833729..d270e47f 100644
--- a/README.md
+++ b/README.md
@@ -202,7 +202,7 @@ I've added some animations for this card to make it alive. Animations are applie
 
 |              Cleaning               |                Docking                |
 | :---------------------------------: | :-----------------------------------: |
-| ![Cleaning anumation][cleaning-gif] | ![Returning anumation][returning-gif] |
+| ![Cleaning animation][cleaning-gif] | ![Returning animation][returning-gif] |
 
 This can be disabled by using the "animated" attribute.