UI improvements and HUD refinements for deployment

frontend/app/FaceVisionApp.tsx

@@ -58,69 +58,75 @@ export default function FaceVisionApp() {
   return (
     <div className="min-h-screen animated-bg flex flex-col">
       {/* Header */}
-      <header className="glass border-b border-white/5 px-6 py-4 flex items-center justify-between">
-        <div className="flex items-center gap-3">
-          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center text-lg shadow-lg">
-            🧠
+      <header className="glass border-b border-white/5 px-8 py-5 flex items-center justify-between sticky top-0 z-50">
+        <div className="flex items-center gap-4">
+          <div className="relative group">
+            <div className="absolute inset-0 bg-blue-500 blur-lg opacity-20 group-hover:opacity-40 transition-opacity" />
+            <div className="relative w-11 h-11 rounded-2xl bg-gradient-to-br from-blue-500 via-indigo-500 to-purple-600 flex items-center justify-center text-xl shadow-2xl transform group-hover:scale-105 transition-transform duration-300">
+              🧠
+            </div>
           </div>
           <div>
             <h1
-              className="text-lg font-bold gradient-text leading-none"
+              className="text-xl font-black gradient-text tracking-tighter"
               style={{ fontFamily: "Outfit, sans-serif" }}
             >
               FaceVision AI
             </h1>
-            <p className="text-xs text-white/30 mt-0.5">Real-Time Expression Recognition</p>
+            <div className="flex items-center gap-2">
+              <span className="w-1.5 h-1.5 rounded-full bg-blue-400 animate-pulse" />
+              <p className="text-[10px] text-white/30 font-bold uppercase tracking-[0.2em]">Neural Engine v1.0</p>
+            </div>
           </div>
         </div>
 
-        <div className="flex items-center gap-3">
+        <div className="flex items-center gap-4">
           {/* Model loading status */}
-          <div className="flex items-center gap-2 glass rounded-full px-3 py-1.5">
+          <div className="flex items-center gap-2.5 glass-strong rounded-xl px-4 py-2 border border-white/5">
             {loadError ? (
               <>
-                <div className="w-2 h-2 rounded-full bg-red-400" />
-                <span className="text-xs text-red-400">Model Error</span>
+                <div className="w-1.5 h-1.5 rounded-full bg-red-400 shadow-[0_0_8px_rgba(248,113,113,0.6)]" />
+                <span className="text-[10px] font-bold text-red-400 uppercase tracking-widest">Engine Error</span>
               </>
             ) : isLoaded ? (
               <>
-                <div className="w-2 h-2 rounded-full bg-green-400" />
-                <span className="text-xs text-green-400">Model Ready</span>
+                <div className="w-1.5 h-1.5 rounded-full bg-green-400 shadow-[0_0_8px_rgba(74,222,128,0.6)]" />
+                <span className="text-[10px] font-bold text-green-400 uppercase tracking-widest">Engine Ready</span>
               </>
             ) : (
               <>
-                <div className="w-2 h-2 rounded-full bg-yellow-400 animate-blink" />
-                <span className="text-xs text-yellow-400">Loading Model…</span>
+                <div className="w-1.5 h-1.5 rounded-full bg-yellow-400 animate-blink shadow-[0_0_8px_rgba(250,204,21,0.6)]" />
+                <span className="text-[10px] font-bold text-yellow-400 uppercase tracking-widest">Initializing…</span>
               </>
             )}
           </div>
 
           {/* Backend status */}
           {logError ? (
-            <div className="flex items-center gap-2 glass rounded-full px-3 py-1.5">
-              <div className="w-2 h-2 rounded-full bg-orange-400" />
-              <span className="text-xs text-orange-400">Backend offline</span>
+            <div className="flex items-center gap-2.5 glass-strong rounded-xl px-4 py-2 border border-white/5">
+              <div className="w-1.5 h-1.5 rounded-full bg-orange-400/50" />
+              <span className="text-[10px] font-bold text-orange-400 uppercase tracking-widest">Offline</span>
             </div>
           ) : lastLog ? (
-            <div className="flex items-center gap-2 glass rounded-full px-3 py-1.5">
-              <div className="w-2 h-2 rounded-full bg-green-400" />
-              <span className="text-xs text-green-400">Logged</span>
+            <div className="flex items-center gap-2.5 glass-strong rounded-xl px-4 py-2 border border-white/5 animate-pulse-glow">
+              <div className="w-1.5 h-1.5 rounded-full bg-blue-400 shadow-[0_0_8px_rgba(96,165,250,0.6)]" />
+              <span className="text-[10px] font-bold text-blue-400 uppercase tracking-widest">Syncing</span>
             </div>
           ) : null}
         </div>
       </header>
 
       {/* Main layout */}
-      <main className="flex-1 flex flex-col lg:flex-row gap-5 p-5 max-w-7xl mx-auto w-full">
+      <main className="flex-1 flex flex-col lg:flex-row gap-8 p-8 max-w-[1600px] mx-auto w-full">
         {/* Left sidebar */}
-        <aside className="w-full lg:w-72 flex flex-col gap-4 order-2 lg:order-1">
+        <aside className="w-full lg:w-80 flex flex-col gap-6 order-2 lg:order-1 animate-slide-in">
           {/* Emotion display */}
-          <div className="glass rounded-2xl p-5 space-y-3">
+          <div className="space-y-3">
             <h2
-              className="text-xs font-semibold text-white/50 uppercase tracking-widest"
+              className="px-1 text-[10px] font-bold text-white/30 uppercase tracking-[0.3em]"
               style={{ fontFamily: "Outfit, sans-serif" }}
             >
-              Current Expression
+              Current State
             </h2>
             <EmotionDisplay emotion={currentEmotion} faceDetected={stats.faceDetected} />
           </div>
@@ -134,32 +140,49 @@ export default function FaceVisionApp() {
 
           {/* Last log entry */}
           {lastLog && (
-            <div className="glass rounded-2xl p-4 space-y-2 animate-fade-in-up">
-              <p className="text-xs text-white/40 uppercase tracking-wider">Last Log</p>
-              <p className="text-sm text-white/70">
-                <span className="font-medium text-white">{lastLog.dominant_emotion}</span>
-                {" "}for {lastLog.duration_seconds}s
-              </p>
-              <p className="text-xs text-white/30">
-                {new Date(lastLog.timestamp).toLocaleTimeString()}
-              </p>
+            <div className="glass rounded-2xl p-5 space-y-3 border-l-2 border-l-blue-500/50 relative overflow-hidden group hover:bg-white/[0.05] transition-colors">
+              <div className="absolute top-0 right-0 p-2 opacity-10 group-hover:opacity-20 transition-opacity">
+                <svg className="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+              </div>
+              <p className="text-[10px] text-blue-400 font-bold uppercase tracking-widest">Recent Activity</p>
+              <div>
+                <p className="text-lg font-bold text-white leading-tight">
+                  {lastLog.dominant_emotion}
+                </p>
+                <p className="text-xs text-white/40 mt-1">
+                  Sustained for {lastLog.duration_seconds}s
+                </p>
+              </div>
+              <div className="pt-2 flex items-center justify-between border-t border-white/5">
+                <span className="text-[10px] text-white/20 font-mono">
+                  {new Date(lastLog.timestamp).toLocaleTimeString()}
+                </span>
+                <span className="text-[10px] text-green-500 font-bold uppercase tracking-tighter">Verified</span>
+              </div>
             </div>
           )}
         </aside>
 
         {/* Video Feed */}
-        <section className="flex-1 flex flex-col gap-4 order-1 lg:order-2">
-          <div className="relative flex-1 rounded-3xl overflow-hidden glass min-h-[400px]">
+        <section className="flex-1 flex flex-col gap-6 order-1 lg:order-2 animate-scale-up">
+          <div className="relative flex-1 rounded-[2.5rem] overflow-hidden glass min-h-[500px] border border-white/10 shadow-2xl">
             {/* Camera error state */}
             {cameraError ? (
-              <div className="absolute inset-0 flex flex-col items-center justify-center gap-4 p-8 text-center">
-                <div className="text-5xl">🚫</div>
-                <p className="text-white/60 text-sm max-w-sm">{cameraError}</p>
+              <div className="absolute inset-0 flex flex-col items-center justify-center gap-6 p-12 text-center bg-black/40 backdrop-blur-md">
+                <div className="w-20 h-20 rounded-3xl bg-red-500/10 border border-red-500/20 flex items-center justify-center text-4xl">
+                  ⚠️
+                </div>
+                <div>
+                  <h3 className="text-xl font-bold text-white mb-2">Camera Access Required</h3>
+                  <p className="text-white/40 text-sm max-w-xs mx-auto leading-relaxed">{cameraError}</p>
+                </div>
                 <button
                   onClick={() => window.location.reload()}
-                  className="px-5 py-2.5 rounded-xl glass-strong text-sm text-white/70 hover:text-white transition-colors border border-white/10 hover:border-white/20"
+                  className="px-8 py-3 rounded-2xl bg-white/5 hover:bg-white/10 text-sm font-bold text-white transition-all border border-white/10 hover:border-white/20"
                 >
-                  Refresh Page
+                  Request Again
                 </button>
               </div>
             ) : (
@@ -172,113 +195,150 @@ export default function FaceVisionApp() {
                   onUserMedia={handleUserMedia}
                   onUserMediaError={handleUserMediaError}
                   videoConstraints={{
-                    width: { ideal: 1280 },
-                    height: { ideal: 720 },
+                    width: { ideal: 1920 },
+                    height: { ideal: 1080 },
                     facingMode: "user",
-                    frameRate: { ideal: 30, max: 60 },
+                    frameRate: { ideal: 60 },
                   }}
-                  className="w-full h-full object-cover"
+                  className="w-full h-full object-cover scale-[1.01]"
                   style={{ display: isCameraReady ? "block" : "none" }}
                 />
 
                 {/* Loading skeleton */}
                 {!isCameraReady && (
-                  <div className="absolute inset-0 flex flex-col items-center justify-center gap-4">
-                    <div className="w-16 h-16 rounded-2xl border-2 border-blue-400/30 border-t-blue-400 animate-rotate" />
-                    <p className="text-sm text-white/40">Requesting camera access…</p>
+                  <div className="absolute inset-0 flex flex-col items-center justify-center gap-6 bg-[#070b14]">
+                    <div className="relative">
+                      <div className="w-20 h-20 rounded-[2rem] border-2 border-blue-500/20" />
+                      <div className="absolute inset-0 w-20 h-20 rounded-[2rem] border-t-2 border-blue-500 animate-spin" />
+                    </div>
+                    <div className="text-center">
+                      <p className="text-sm font-bold text-white/60 tracking-widest uppercase">Initializing Vision</p>
+                      <p className="text-xs text-white/20 mt-2">Connecting to hardware layer…</p>
+                    </div>
                   </div>
                 )}
 
-                {/* Emotion overlay glow border */}
-                {isCameraReady && isTracking && (
-                  <div
-                    className="absolute inset-0 pointer-events-none rounded-3xl transition-all duration-500"
-                    style={{
-                      boxShadow: `inset 0 0 60px ${glowColor}20, 0 0 40px ${glowColor}15`,
-                      border: `1px solid ${glowColor}30`,
-                    }}
-                  />
-                )}
-
-                {/* Corner brackets overlay */}
+                {/* HUD Elements */}
                 {isCameraReady && isTracking && (
                   <>
-                    <div className="absolute top-4 left-4 w-8 h-8 border-t-2 border-l-2 border-blue-400/50 rounded-tl-lg" />
-                    <div className="absolute top-4 right-4 w-8 h-8 border-t-2 border-r-2 border-blue-400/50 rounded-tr-lg" />
-                    <div className="absolute bottom-4 left-4 w-8 h-8 border-b-2 border-l-2 border-blue-400/50 rounded-bl-lg" />
-                    <div className="absolute bottom-4 right-4 w-8 h-8 border-b-2 border-r-2 border-blue-400/50 rounded-br-lg" />
-                  </>
-                )}
-
-                {/* Emotion badge overlay */}
-                {isCameraReady && isTracking && stats.faceDetected && (
-                  <div
-                    key={currentEmotion}
-                    className="absolute top-5 left-1/2 -translate-x-1/2 animate-emotion"
-                  >
+                    {/* Emotion overlay glow border */}
                     <div
-                      className="px-5 py-2 rounded-full glass-strong backdrop-blur-xl border text-sm font-semibold transition-all duration-300"
+                      className="absolute inset-0 pointer-events-none transition-all duration-700"
                       style={{
-                        borderColor: `${glowColor}50`,
-                        color: glowColor,
-                        boxShadow: `0 0 20px ${glowColor}20`,
+                        boxShadow: `inset 0 0 100px ${glowColor}15, inset 0 0 40px ${glowColor}10`,
+                        border: `2px solid ${glowColor}20`,
                       }}
-                    >
-                      {currentEmotion === "Happy" && "😊 "}
-                      {currentEmotion === "Sad" && "😢 "}
-                      {currentEmotion === "Angry" && "😠 "}
-                      {currentEmotion === "Surprised" && "😲 "}
-                      {currentEmotion === "Neutral" && "😐 "}
-                      {currentEmotion}
+                    />
+
+                    {/* Corner brackets overlay */}
+                    <div className="absolute inset-8 pointer-events-none opacity-40">
+                      <div className="absolute top-0 left-0 w-12 h-12 border-t-2 border-l-2 border-blue-400 rounded-tl-2xl" />
+                      <div className="absolute top-0 right-0 w-12 h-12 border-t-2 border-r-2 border-blue-400 rounded-tr-2xl" />
+                      <div className="absolute bottom-0 left-0 w-12 h-12 border-b-2 border-l-2 border-blue-400 rounded-bl-2xl" />
+                      <div className="absolute bottom-0 right-0 w-12 h-12 border-b-2 border-r-2 border-blue-400 rounded-br-2xl" />
                     </div>
-                  </div>
-                )}
 
-                {/* Scan line when tracking */}
-                {isCameraReady && isTracking && (
-                  <div className="absolute inset-0 overflow-hidden pointer-events-none rounded-3xl">
-                    <div className="w-full h-0.5 bg-gradient-to-r from-transparent via-blue-400/40 to-transparent absolute"
-                      style={{ animation: "scan-line 4s linear infinite" }} />
-                  </div>
+                    {/* Emotion badge overlay */}
+                    {stats.faceDetected && (
+                      <div
+                        key={currentEmotion}
+                        className="absolute bottom-10 left-1/2 -translate-x-1/2 animate-emotion"
+                      >
+                        <div
+                          className="px-8 py-3 rounded-2xl glass-strong border-2 backdrop-blur-3xl text-lg font-black transition-all duration-500 flex items-center gap-3 shadow-[0_20px_50px_rgba(0,0,0,0.5)]"
+                          style={{
+                            borderColor: `${glowColor}30`,
+                            color: glowColor,
+                            boxShadow: `0 0 30px ${glowColor}15`,
+                          }}
+                        >
+                          <span className="text-2xl filter drop-shadow-md">
+                            {currentEmotion === "Happy" && "😊"}
+                            {currentEmotion === "Sad" && "😢"}
+                            {currentEmotion === "Angry" && "😠"}
+                            {currentEmotion === "Surprised" && "😲"}
+                            {currentEmotion === "Neutral" && "😐"}
+                          </span>
+                          <span className="tracking-tighter uppercase">{currentEmotion}</span>
+                        </div>
+                      </div>
+                    )}
+
+                    {/* Scanning Grid Effect */}
+                    <div className="absolute inset-0 overflow-hidden pointer-events-none opacity-20">
+                      <div className="w-full h-full" 
+                        style={{ 
+                          backgroundImage: 'radial-gradient(circle, white 1px, transparent 1px)',
+                          backgroundSize: '40px 40px' 
+                        }} 
+                      />
+                      <div className="w-full h-1 bg-gradient-to-r from-transparent via-blue-400 to-transparent absolute shadow-[0_0_20px_rgba(96,165,250,0.5)]"
+                        style={{ animation: "scan-line 6s ease-in-out infinite" }} />
+                    </div>
+                  </>
                 )}
               </>
             )}
           </div>
 
           {/* Controls */}
-          <div className="glass rounded-2xl p-4 flex items-center justify-between gap-4">
-            <div className="text-sm text-white/40">
-              {!isCameraReady
-                ? "Waiting for camera…"
-                : !isLoaded
-                ? "Loading AI model…"
-                : isTracking
-                ? `Tracking active • Logs every 10s`
-                : "Ready to track"}
+          <div className="glass rounded-3xl p-5 flex items-center justify-between gap-6 border border-white/5 shadow-xl">
+            <div className="flex items-center gap-4">
+              <div className={`flex items-center gap-2 px-3 py-1.5 rounded-xl bg-white/5 border border-white/5 transition-all duration-500 ${isTracking ? 'opacity-100' : 'opacity-40'}`}>
+                <div className={`w-2 h-2 rounded-full ${isTracking ? 'bg-blue-400 animate-pulse shadow-[0_0_8px_rgba(96,165,250,0.6)]' : 'bg-white/20'}`} />
+                <span className="text-[10px] font-bold text-white/50 uppercase tracking-widest">System Live</span>
+              </div>
+              <div className="h-4 w-px bg-white/10" />
+              <p className="text-xs text-white/30 font-medium tracking-tight">
+                {!isCameraReady
+                  ? "Waiting for sensor input…"
+                  : !isLoaded
+                  ? "Loading neural weights…"
+                  : isTracking
+                  ? `Processing window active • Log interval 10s`
+                  : "Vision system standby"}
+              </p>
             </div>
 
             <button
               id="tracking-toggle-btn"
               onClick={() => setIsTracking((v) => !v)}
               disabled={!isCameraReady || !isLoaded || !!loadError}
-              className={`px-6 py-2.5 rounded-xl text-sm font-semibold transition-all duration-200 disabled:opacity-30 disabled:cursor-not-allowed ${
+              className={`relative group px-10 py-4 rounded-2xl text-sm font-black transition-all duration-300 disabled:opacity-20 disabled:cursor-not-allowed overflow-hidden ${
                 isTracking
-                  ? "bg-red-500/20 border border-red-500/40 text-red-400 hover:bg-red-500/30"
-                  : "bg-gradient-to-r from-blue-500 to-purple-600 text-white hover:opacity-90 shadow-lg"
+                  ? "bg-red-500/10 text-red-400 border border-red-500/30 hover:bg-red-500/20"
+                  : "bg-white text-black hover:bg-white/90 shadow-[0_10px_20px_rgba(255,255,255,0.1)]"
               }`}
             >
-              {isTracking ? "⏹ Stop Tracking" : "▶ Start Tracking"}
+              <div className="relative z-10 flex items-center gap-2">
+                {isTracking ? (
+                  <>
+                    <span className="text-lg">⏹</span>
+                    <span className="uppercase tracking-tighter">Disable</span>
+                  </>
+                ) : (
+                  <>
+                    <span className="text-lg">▶</span>
+                    <span className="uppercase tracking-tighter">Initialize</span>
+                  </>
+                )}
+              </div>
             </button>
           </div>
         </section>
       </main>
 
       {/* Footer */}
-      <footer className="glass border-t border-white/5 py-3 px-6 text-center">
-        <p className="text-xs text-white/20">
-          Powered by MediaPipe Face Landmarker · Processing runs 100% in-browser · No video is uploaded
+      <footer className="glass border-t border-white/5 py-4 px-8 flex items-center justify-between">
+        <p className="text-[10px] text-white/20 font-bold uppercase tracking-[0.2em]">
+          End-to-End Encryption • Local Edge Inference
         </p>
+        <div className="flex items-center gap-6">
+          <span className="text-[10px] text-white/20 font-bold uppercase tracking-[0.2em]">MediaPipe AI</span>
+          <span className="text-[10px] text-white/20 font-bold uppercase tracking-[0.2em]">WASM Optimized</span>
+        </div>
       </footer>
+
     </div>
   );
 }

frontend/app/components/EmotionDisplay.tsx

@@ -53,26 +53,59 @@ export default function EmotionDisplay({ emotion, faceDetected }: EmotionDisplay
 
   if (!faceDetected) {
     return (
-      <div className="glass rounded-2xl p-5 flex items-center gap-4 border border-dashed border-white/10">
-        <div className="text-3xl opacity-40">👤</div>
+      <div className="glass rounded-2xl p-6 flex items-center gap-5 border border-dashed border-white/10 animate-pulse-slow">
+        <div className="relative">
+          <div className="w-12 h-12 rounded-full bg-white/5 flex items-center justify-center text-2xl grayscale opacity-30">
+            👤
+          </div>
+          <div className="absolute inset-0 rounded-full border border-white/10 animate-ping opacity-20" />
+        </div>
         <div>
-          <p className="text-sm font-medium text-white/30">No Face Detected</p>
-          <p className="text-xs text-white/20 mt-0.5">Position your face in the camera</p>
+          <p className="text-sm font-bold text-white/40 tracking-tight uppercase">Ready to Scan</p>
+          <p className="text-[11px] text-white/20 mt-0.5 leading-tight">Please position your face<br/>clearly in the camera</p>
         </div>
       </div>
     );
   }
 
+  const emotionColors: Record<EmotionType, string> = {
+    Happy: "rgba(104, 211, 145, 0.4)",
+    Sad: "rgba(118, 228, 247, 0.4)",
+    Angry: "rgba(252, 129, 129, 0.4)",
+    Surprised: "rgba(246, 173, 85, 0.4)",
+    Neutral: "rgba(160, 174, 192, 0.3)",
+  };
+
   return (
     <div
       key={emotion}
-      className={`glass rounded-2xl p-5 flex items-center gap-4 border animate-emotion ${config.bgClass}`}
+      className={`relative glass rounded-2xl p-5 flex items-center gap-5 border overflow-hidden transition-all duration-500 ${config.bgClass} animate-emotion`}
+      style={{
+        boxShadow: `0 10px 40px -10px ${emotionColors[emotion]}`,
+      }}
     >
-      <div className="text-4xl">{config.emoji}</div>
-      <div>
-        <p className={`text-xl font-bold ${config.colorClass}`}>{config.label}</p>
-        <p className="text-xs text-white/40 mt-0.5">{config.description}</p>
+      {/* Background Glow */}
+      <div 
+        className="absolute -right-4 -top-4 w-24 h-24 blur-3xl rounded-full opacity-20 transition-all duration-700"
+        style={{ background: emotionColors[emotion] }}
+      />
+      
+      <div className="relative text-5xl animate-float filter drop-shadow-lg">
+        {config.emoji}
+      </div>
+      
+      <div className="relative">
+        <div className="flex items-center gap-2 mb-0.5">
+          <p className={`text-2xl font-black tracking-tight ${config.colorClass}`}>
+            {config.label}
+          </p>
+          <div className={`w-1.5 h-1.5 rounded-full animate-blink ${config.bgClass}`} style={{ background: 'currentColor' }} />
+        </div>
+        <p className="text-xs text-white/40 font-medium">
+          {config.description}
+        </p>
       </div>
     </div>
   );
 }
+

frontend/app/components/StatsPanel.tsx

@@ -8,20 +8,23 @@ interface BlendshapeBarProps {
 
 function BlendshapeBar({ name, value, color = "#63b3ed" }: BlendshapeBarProps) {
   return (
-    <div className="flex items-center gap-2">
-      <span className="text-xs text-white/40 w-28 truncate flex-shrink-0">{name}</span>
-      <div className="flex-1 h-1.5 bg-white/5 rounded-full overflow-hidden">
+    <div className="flex flex-col gap-1.5">
+      <div className="flex items-center justify-between px-0.5">
+        <span className="text-[10px] text-white/40 uppercase tracking-wider font-medium">{name}</span>
+        <span className="text-[10px] text-white/30 font-mono">
+          {Math.round(value * 100)}%
+        </span>
+      </div>
+      <div className="h-1.5 bg-white/5 rounded-full overflow-hidden border border-white/5 shadow-inner">
         <div
-          className="h-full rounded-full transition-all duration-100"
+          className="h-full rounded-full transition-all duration-300 ease-out"
           style={{
             width: `${Math.round(value * 100)}%`,
-            background: color,
+            background: `linear-gradient(90deg, ${color}cc, ${color})`,
+            boxShadow: `0 0 10px ${color}40`,
           }}
         />
       </div>
-      <span className="text-xs text-white/30 w-8 text-right flex-shrink-0">
-        {Math.round(value * 100)}
-      </span>
     </div>
   );
 }
@@ -36,7 +39,7 @@ const KEY_BLENDSHAPES: Array<{ key: string; label: string; color: string }> = [
   { key: "mouthSmileLeft", label: "Smile L", color: "#68d391" },
   { key: "mouthSmileRight", label: "Smile R", color: "#68d391" },
   { key: "browInnerUp", label: "Brow Up", color: "#f6ad55" },
-  { key: "jawOpen", label: "Jaw Open", color: "#f6ad55" },
+  { key: "jawOpen", label: "Jaw Open", color: "#63b3ed" },
   { key: "browDownLeft", label: "Brow ↓L", color: "#fc8181" },
   { key: "browDownRight", label: "Brow ↓R", color: "#fc8181" },
   { key: "mouthFrownLeft", label: "Frown L", color: "#76e4f7" },
@@ -45,52 +48,71 @@ const KEY_BLENDSHAPES: Array<{ key: string; label: string; color: string }> = [
 
 export default function StatsPanel({ fps, faceDetected, blendshapes }: StatsPanel) {
   return (
-    <div className="glass rounded-2xl p-5 space-y-4">
+    <div className="glass rounded-2xl p-5 space-y-6 animate-scale-up">
       <div className="flex items-center justify-between">
-        <h3
-          style={{ fontFamily: "Outfit, sans-serif" }}
-          className="text-sm font-semibold text-white/60 uppercase tracking-widest"
-        >
-          Analytics
-        </h3>
         <div className="flex items-center gap-2">
-          <div
-            className={`w-2 h-2 rounded-full ${faceDetected ? "bg-green-400 animate-pulse" : "bg-red-400/50"}`}
-          />
-          <span className="text-xs text-white/40">{faceDetected ? "Tracking" : "Searching"}</span>
+          <div className="p-1.5 rounded-lg bg-blue-500/10 border border-blue-500/20">
+            <svg className="w-3.5 h-3.5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+            </svg>
+          </div>
+          <h3
+            style={{ fontFamily: "Outfit, sans-serif" }}
+            className="text-xs font-bold text-white/70 uppercase tracking-widest"
+          >
+            Analytics
+          </h3>
+        </div>
+        <div className={`px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-tighter border transition-colors ${
+          faceDetected ? "bg-green-500/10 border-green-500/30 text-green-400" : "bg-red-500/10 border-red-500/30 text-red-400"
+        }`}>
+          {faceDetected ? "Active" : "Idle"}
         </div>
       </div>
 
-      {/* FPS Badge */}
-      <div className="flex items-center gap-3">
-        <div className="glass-strong rounded-xl px-4 py-2 flex-1 text-center">
-          <p className="text-2xl font-bold gradient-text" style={{ fontFamily: "Outfit, sans-serif" }}>
-            {fps}
-          </p>
-          <p className="text-xs text-white/30">FPS</p>
+      {/* Stats Grid */}
+      <div className="grid grid-cols-2 gap-3">
+        <div className="glass-strong rounded-xl p-3 border border-white/5 group hover:border-white/10 transition-colors">
+          <p className="text-xs text-white/30 mb-1">Performance</p>
+          <div className="flex items-baseline gap-1">
+            <span className="text-2xl font-bold text-white tracking-tight" style={{ fontFamily: "Outfit, sans-serif" }}>
+              {fps}
+            </span>
+            <span className="text-[10px] text-white/20 font-bold uppercase">fps</span>
+          </div>
         </div>
-        <div className="glass-strong rounded-xl px-4 py-2 flex-1 text-center">
-          <p className="text-2xl font-bold text-white/80" style={{ fontFamily: "Outfit, sans-serif" }}>
-            {faceDetected ? "1" : "0"}
-          </p>
-          <p className="text-xs text-white/30">Faces</p>
+        <div className="glass-strong rounded-xl p-3 border border-white/5 group hover:border-white/10 transition-colors">
+          <p className="text-xs text-white/30 mb-1">Detection</p>
+          <div className="flex items-baseline gap-1">
+            <span className="text-2xl font-bold text-white tracking-tight" style={{ fontFamily: "Outfit, sans-serif" }}>
+              {faceDetected ? "1" : "0"}
+            </span>
+            <span className="text-[10px] text-white/20 font-bold uppercase">face</span>
+          </div>
         </div>
       </div>
 
       {/* Blendshapes */}
       {faceDetected && (
-        <div className="space-y-2">
-          <p className="text-xs text-white/30 uppercase tracking-wider">Blendshapes</p>
-          {KEY_BLENDSHAPES.map(({ key, label, color }) => (
-            <BlendshapeBar
-              key={key}
-              name={label}
-              value={blendshapes[key] ?? 0}
-              color={color}
-            />
-          ))}
+        <div className="space-y-4 pt-2">
+          <div className="flex items-center gap-2">
+            <div className="h-px flex-1 bg-gradient-to-r from-transparent via-white/10 to-transparent" />
+            <span className="text-[10px] text-white/20 uppercase tracking-widest font-bold">Signals</span>
+            <div className="h-px flex-1 bg-gradient-to-r from-transparent via-white/10 to-transparent" />
+          </div>
+          <div className="grid grid-cols-1 gap-4">
+            {KEY_BLENDSHAPES.map(({ key, label, color }) => (
+              <BlendshapeBar
+                key={key}
+                name={label}
+                value={blendshapes[key] ?? 0}
+                color={color}
+              />
+            ))}
+          </div>
         </div>
       )}
     </div>
   );
 }
+

frontend/app/globals.css

@@ -39,17 +39,19 @@ html, body {
 
 /* Glassmorphism */
 .glass {
-  background: rgba(255, 255, 255, 0.04);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
+  background: rgba(255, 255, 255, 0.03);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
   border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
 }
 
 .glass-strong {
-  background: rgba(255, 255, 255, 0.07);
-  backdrop-filter: blur(40px);
-  -webkit-backdrop-filter: blur(40px);
+  background: rgba(255, 255, 255, 0.06);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
   border: 1px solid rgba(255, 255, 255, 0.12);
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
 }
 
 /* Gradient text */
@@ -58,26 +60,44 @@ html, body {
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
+  font-weight: 700;
 }
 
-/* Animated gradient background */
-.animated-bg {
-  background: 
-    radial-gradient(ellipse at 20% 50%, rgba(99, 179, 237, 0.08) 0%, transparent 50%),
-    radial-gradient(ellipse at 80% 20%, rgba(159, 122, 234, 0.08) 0%, transparent 50%),
-    radial-gradient(ellipse at 60% 80%, rgba(104, 211, 145, 0.05) 0%, transparent 50%),
-    var(--bg-primary);
+/* High-Tech Borders */
+.cyber-border {
+  position: relative;
+  border: 1px solid rgba(99, 179, 237, 0.2);
 }
 
-/* Pulse animation */
-@keyframes pulse-glow {
-  0%, 100% { box-shadow: 0 0 20px rgba(99, 179, 237, 0.2); }
-  50% { box-shadow: 0 0 40px rgba(99, 179, 237, 0.4), 0 0 80px rgba(99, 179, 237, 0.1); }
+.cyber-border::before {
+  content: '';
+  position: absolute;
+  top: -1px; left: -1px; right: -1px; bottom: -1px;
+  background: linear-gradient(45deg, transparent, rgba(99, 179, 237, 0.3), transparent);
+  z-index: -1;
+  border-radius: inherit;
+  opacity: 0;
+  transition: opacity 0.3s;
 }
 
-@keyframes float {
-  0%, 100% { transform: translateY(0px); }
-  50% { transform: translateY(-6px); }
+.cyber-border:hover::before {
+  opacity: 1;
+}
+
+/* Animations */
+@keyframes slide-in-right {
+  0% { opacity: 0; transform: translateX(30px); }
+  100% { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes scale-up {
+  0% { opacity: 0; transform: scale(0.95); }
+  100% { opacity: 1; transform: scale(1); }
+}
+
+@keyframes glow-pulse {
+  0%, 100% { opacity: 0.5; }
+  50% { opacity: 1; }
 }
 
 @keyframes scan-line {
@@ -90,11 +110,6 @@ html, body {
   100% { opacity: 1; transform: scale(1) translateY(0px); }
 }
 
-@keyframes shimmer {
-  0% { background-position: -200% center; }
-  100% { background-position: 200% center; }
-}
-
 @keyframes blink {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.3; }
@@ -110,8 +125,9 @@ html, body {
   100% { opacity: 1; transform: translateY(0); }
 }
 
-.animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
-.animate-float { animation: float 3s ease-in-out infinite; }
+.animate-slide-in { animation: slide-in-right 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
+.animate-scale-up { animation: scale-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
+.animate-glow { animation: glow-pulse 2s ease-in-out infinite; }
 .animate-emotion { animation: emotion-appear 0.3s ease-out forwards; }
 .animate-fade-in-up { animation: fade-in-up 0.5s ease-out forwards; }
 .animate-blink { animation: blink 1.5s ease-in-out infinite; }
@@ -124,38 +140,27 @@ html, body {
 .emotion-surprised { color: #f6ad55; }
 .emotion-neutral { color: #a0aec0; }
 
-.emotion-bg-happy { background: rgba(104, 211, 145, 0.15); border-color: rgba(104, 211, 145, 0.4); }
-.emotion-bg-sad { background: rgba(118, 228, 247, 0.15); border-color: rgba(118, 228, 247, 0.4); }
-.emotion-bg-angry { background: rgba(252, 129, 129, 0.15); border-color: rgba(252, 129, 129, 0.4); }
-.emotion-bg-surprised { background: rgba(246, 173, 85, 0.15); border-color: rgba(246, 173, 85, 0.4); }
-.emotion-bg-neutral { background: rgba(160, 174, 192, 0.12); border-color: rgba(160, 174, 192, 0.3); }
+.emotion-bg-happy { background: rgba(104, 211, 145, 0.1); border-color: rgba(104, 211, 145, 0.2); }
+.emotion-bg-sad { background: rgba(118, 228, 247, 0.1); border-color: rgba(118, 228, 247, 0.2); }
+.emotion-bg-angry { background: rgba(252, 129, 129, 0.1); border-color: rgba(252, 129, 129, 0.2); }
+.emotion-bg-surprised { background: rgba(246, 173, 85, 0.1); border-color: rgba(246, 173, 85, 0.2); }
+.emotion-bg-neutral { background: rgba(160, 174, 192, 0.08); border-color: rgba(160, 174, 192, 0.15); }
 
-/* Video scan effect */
-.scan-overlay::after {
-  content: '';
-  position: absolute;
-  width: 100%;
-  height: 2px;
-  background: linear-gradient(90deg, transparent, rgba(99, 179, 237, 0.6), transparent);
-  animation: scan-line 3s linear infinite;
-  pointer-events: none;
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+  width: 5px;
 }
 
-/* Corner brackets */
-.corner-bracket::before,
-.corner-bracket::after {
-  content: '';
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  border-color: rgba(99, 179, 237, 0.6);
-  border-style: solid;
+::-webkit-scrollbar-track {
+  background: transparent;
 }
-.corner-bracket::before {
-  top: 8px; left: 8px;
-  border-width: 2px 0 0 2px;
+
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 10px;
 }
-.corner-bracket::after {
-  bottom: 8px; right: 8px;
-  border-width: 0 2px 2px 0;
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.2);
 }
+