Add mouse-reactive pulsating effects to CPU and memory graph dashboards

Graphs now respond to mouse hover with a radial glow that follows the cursor
and pulsating animations on the chart area, values, core indicators, and memory bar.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: jbingham17

src/App.css

@@ -219,12 +219,46 @@ body {
 /* Graph Cards */
 .cpu-graph,
 .memory-graph {
+  --mouse-x: 50%;
+  --mouse-y: 50%;
   background: var(--bg-card);
   border: 1px solid var(--border-color);
   border-radius: 12px;
   padding: 16px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
   transition: border-color 0.3s, box-shadow 0.3s;
+  position: relative;
+  overflow: hidden;
+}
+
+.cpu-graph::before,
+.memory-graph::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: radial-gradient(
+    circle 200px at var(--mouse-x) var(--mouse-y),
+    rgba(96, 165, 250, 0.12) 0%,
+    transparent 70%
+  );
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.cpu-graph > *,
+.memory-graph > * {
+  position: relative;
+  z-index: 1;
+}
+
+.cpu-graph:hover::before,
+.memory-graph:hover::before {
+  opacity: 1;
 }
 
 .cpu-graph:hover,
@@ -233,6 +267,89 @@ body {
   box-shadow: 0 4px 30px rgba(96, 165, 250, 0.15);
 }
 
+/* Pulsating graph effect on hover */
+.cpu-graph.graph-hovered .graph-container,
+.memory-graph.graph-hovered .graph-container {
+  animation: graphPulsate 2s ease-in-out infinite;
+}
+
+.cpu-graph.graph-hovered .graph-value,
+.memory-graph.graph-hovered .graph-value {
+  animation: valuePulsate 1.5s ease-in-out infinite;
+}
+
+.cpu-graph.graph-hovered .core-indicator {
+  animation: corePulsate 2s ease-in-out infinite;
+}
+
+.cpu-graph.graph-hovered .core-indicator:nth-child(odd) {
+  animation-delay: 0.15s;
+}
+
+.cpu-graph.graph-hovered .core-indicator:nth-child(3n) {
+  animation-delay: 0.3s;
+}
+
+.memory-graph.graph-hovered .memory-bar-fill {
+  animation: barPulsate 1.8s ease-in-out infinite;
+}
+
+.memory-graph.graph-hovered .memory-stat .stat-value {
+  animation: valuePulsate 2s ease-in-out infinite;
+}
+
+.memory-graph.graph-hovered .memory-stat:nth-child(2) .stat-value {
+  animation-delay: 0.2s;
+}
+
+.memory-graph.graph-hovered .memory-stat:nth-child(3) .stat-value {
+  animation-delay: 0.4s;
+}
+
+@keyframes graphPulsate {
+  0%, 100% {
+    filter: brightness(1) saturate(1);
+    transform: scale(1);
+  }
+  50% {
+    filter: brightness(1.3) saturate(1.4);
+    transform: scale(1.01);
+  }
+}
+
+@keyframes valuePulsate {
+  0%, 100% {
+    opacity: 1;
+    text-shadow: 0 0 20px currentColor;
+  }
+  50% {
+    opacity: 0.8;
+    text-shadow: 0 0 40px currentColor, 0 0 60px currentColor;
+  }
+}
+
+@keyframes corePulsate {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.85;
+    transform: scale(1.02);
+  }
+}
+
+@keyframes barPulsate {
+  0%, 100% {
+    filter: brightness(1);
+    box-shadow: 0 0 20px currentColor;
+  }
+  50% {
+    filter: brightness(1.4);
+    box-shadow: 0 0 35px currentColor, 0 0 50px currentColor;
+  }
+}
+
 .graph-header {
   display: flex;
   justify-content: space-between;

src/components/CpuGraph.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import {
   AreaChart,
   Area,
@@ -36,6 +36,16 @@ const COLORS = [
 
 export function CpuGraph({ cpuUsage }: CpuGraphProps) {
   const [history, setHistory] = useState<HistoryPoint[]>([]);
+  const [isHovered, setIsHovered] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const handleMouseMove = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = ((e.clientX - rect.left) / rect.width) * 100;
+    const y = ((e.clientY - rect.top) / rect.height) * 100;
+    e.currentTarget.style.setProperty('--mouse-x', `${x}%`);
+    e.currentTarget.style.setProperty('--mouse-y', `${y}%`);
+  }, []);
 
   useEffect(() => {
     const newPoint: HistoryPoint = { time: Date.now() };
@@ -57,7 +67,13 @@ export function CpuGraph({ cpuUsage }: CpuGraphProps) {
     : 0;
 
   return (
-    <div className="cpu-graph">
+    <div
+      className={`cpu-graph${isHovered ? ' graph-hovered' : ''}`}
+      ref={containerRef}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      onMouseMove={handleMouseMove}
+    >
       <div className="graph-header">
         <span className="graph-title">CPU</span>
         <span className="graph-value" style={{ color: getUsageColor(avgUsage) }}>

src/components/MemoryGraph.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import {
   AreaChart,
   Area,
@@ -32,6 +32,16 @@ function formatBytes(bytes: number): string {
 
 export function MemoryGraph({ used, total, percent }: MemoryGraphProps) {
   const [history, setHistory] = useState<HistoryPoint[]>([]);
+  const [isHovered, setIsHovered] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const handleMouseMove = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = ((e.clientX - rect.left) / rect.width) * 100;
+    const y = ((e.clientY - rect.top) / rect.height) * 100;
+    e.currentTarget.style.setProperty('--mouse-x', `${x}%`);
+    e.currentTarget.style.setProperty('--mouse-y', `${y}%`);
+  }, []);
 
   useEffect(() => {
     const newPoint: HistoryPoint = {
@@ -59,7 +69,13 @@ export function MemoryGraph({ used, total, percent }: MemoryGraphProps) {
   const color = getMemoryColor(percent);
 
   return (
-    <div className="memory-graph">
+    <div
+      className={`memory-graph${isHovered ? ' graph-hovered' : ''}`}
+      ref={containerRef}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      onMouseMove={handleMouseMove}
+    >
       <div className="graph-header">
         <span className="graph-title">Memory</span>
         <span className="graph-value" style={{ color }}>