From 9d08ca7b9db95e81422123ec05a992b2ccc53706 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Mon, 22 Dec 2025 19:45:20 -0500
Subject: [PATCH] feat: enhance live telemetry chart with animation for better
 visual feedback

---
 themes/lucentui/views/home.blade.php | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/themes/lucentui/views/home.blade.php b/themes/lucentui/views/home.blade.php
index 231671dd0..fbe97cece 100644
--- a/themes/lucentui/views/home.blade.php
+++ b/themes/lucentui/views/home.blade.php
@@ -209,10 +209,10 @@
                         </div>
                         <h3 class="text-2xl font-bold text-color-base mb-2">Live Telemetry</h3>
                         <p class="text-color-muted leading-relaxed mb-6">Monitor CPU, memory, network, and disk I/O with interactive charts. Track performance over hours, days, weeks, or months.</p>
-                        <!-- Mock Chart -->
+                        <!-- Mock Chart - Animated -->
                         <div class="h-24 flex items-end gap-1 p-4 bg-background/50 rounded-xl">
                             @for($i = 0; $i < 24; $i++)
-                            <div class="flex-1 bg-gradient-to-t from-primary to-primary/50 rounded-t transition-all hover:from-primary/90" style="height: {{ rand(20, 100) }}%"></div>
+                            <div class="flex-1 bg-gradient-to-t from-primary to-primary/50 rounded-t chart-bar" style="--bar-height: {{ rand(25, 95) }}%; animation-delay: {{ $i * 0.1 }}s;"></div>
                             @endfor
                         </div>
                     </div>
@@ -675,4 +675,12 @@
     .scrollbar-hide::-webkit-scrollbar {
         display: none;
     }
+    @keyframes chartPulse {
+        0%, 100% { height: var(--bar-height); }
+        50% { height: calc(var(--bar-height) * 0.6); }
+    }
+    .chart-bar {
+        height: var(--bar-height);
+        animation: chartPulse 2s ease-in-out infinite;
+    }
 </style>