From 956cfbcf354a32bd15e7fff7d72064dc925082c0 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 11 Mar 2026 23:38:04 +0100
Subject: [PATCH] feat: animate active metric indicator with spring slide

---
 components/dashboard/Chart.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/components/dashboard/Chart.tsx b/components/dashboard/Chart.tsx
index 21a39f1..d4db745 100644
--- a/components/dashboard/Chart.tsx
+++ b/components/dashboard/Chart.tsx
@@ -9,6 +9,7 @@ import { formatNumber, formatDuration, formatUpdatedAgo, DatePicker } from '@cip
 import { Select, DownloadIcon, PlusIcon, XIcon } from '@ciphera-net/ui'
 import { Checkbox } from '@ciphera-net/ui'
 import { ArrowUpRight, ArrowDownRight } from '@phosphor-icons/react'
+import { motion } from 'framer-motion'
 import { cn } from '@/lib/utils'
 
 const ANNOTATION_COLORS: Record<string, string> = {
@@ -372,7 +373,11 @@ export default function Chart({
                     })()
                 }</div>
                 {metric === m.key && (
-                  <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-brand-orange" />
+                  <motion.div
+                    layoutId="activeMetric"
+                    className="absolute bottom-0 left-0 right-0 h-0.5 bg-brand-orange"
+                    transition={{ type: 'spring', stiffness: 500, damping: 35 }}
+                  />
                 )}
               </button>
             ))}