Spaces:

Aarav13
/

AuthriX

Sleeping

Deepfake Authenticator commited on Apr 25

Commit

459d5a1

1 Parent(s): 91da8ab

feat: React + Three.js UI with 3D reactive orb

- Vite + React + TypeScript frontend
- Three.js / React Three Fiber: animated 3D orb that changes color/behavior
based on analysis state (idle=blue, loading=fast spin, FAKE=red, REAL=green)
- Framer Motion: spring animations, AnimatePresence transitions, shimmer button
- Zustand state management
- Animated confidence arc (SVG semicircle gauge)
- Frame timeline with per-bar Framer Motion animations
- Agent pipeline cards with sequential activation
- Audio analysis card with Wav2Vec2 + heuristic scores
- Sticky 3D orb panel on desktop, stacks on mobile
- Vite proxy for dev, FastAPI serves built dist in production

Files changed (13) hide show

backend/main.py +26 -6
frontend/index.html +12 -411
frontend/package-lock.json +697 -9
frontend/package.json +6 -1
frontend/src/App.tsx +183 -0
frontend/src/api.ts +20 -0
frontend/src/components/DeepfakeOrb.tsx +103 -0
frontend/src/components/ResultPanel.tsx +346 -0
frontend/src/components/UploadZone.tsx +190 -0
frontend/src/index.css +32 -46
frontend/src/main.tsx +10 -0
frontend/src/store.ts +59 -0
frontend/vite.config.js +11 -1

backend/main.py CHANGED Viewed

@@ -135,23 +135,43 @@ async def analyze_video(file: UploadFile = File(...)):
 # ── Serve frontend ────────────────────────────
-frontend_path = Path(__file__).parent.parent / "frontend-vanilla"
-if frontend_path.exists():
     @app.get("/script.js")
     async def serve_script():
-        from fastapi.responses import FileResponse
         return FileResponse(
-            str(frontend_path / "script.js"),
             media_type="application/javascript",
             headers={"Cache-Control": "no-store, no-cache, must-revalidate"},
         )
     @app.get("/")
     async def serve_index():
-        from fastapi.responses import FileResponse
         return FileResponse(
-            str(frontend_path / "index.html"),
             headers={"Cache-Control": "no-store, no-cache, must-revalidate"},
         )

 # ── Serve frontend ────────────────────────────
+# Prefer built React dist, fall back to vanilla HTML
+_react_dist   = Path(__file__).parent.parent / "frontend-dist"
+_vanilla_dir  = Path(__file__).parent.parent / "frontend-vanilla"
+if _react_dist.exists():
+    # Serve React SPA
+    app.mount("/assets", StaticFiles(directory=str(_react_dist / "assets")), name="assets")
+    @app.get("/")
+    async def serve_index():
+        return FileResponse(
+            str(_react_dist / "index.html"),
+            headers={"Cache-Control": "no-store, no-cache, must-revalidate"},
+        )
+    # Catch-all for React Router (SPA fallback)
+    @app.get("/{full_path:path}")
+    async def spa_fallback(full_path: str):
+        index = _react_dist / "index.html"
+        if index.exists():
+            return FileResponse(str(index))
+        return {"detail": "Not found"}
+elif _vanilla_dir.exists():
+    # Fallback: vanilla HTML
     @app.get("/script.js")
     async def serve_script():
         return FileResponse(
+            str(_vanilla_dir / "script.js"),
             media_type="application/javascript",
             headers={"Cache-Control": "no-store, no-cache, must-revalidate"},
         )
     @app.get("/")
     async def serve_index():
         return FileResponse(
+            str(_vanilla_dir / "index.html"),
             headers={"Cache-Control": "no-store, no-cache, must-revalidate"},
         )

frontend/index.html CHANGED Viewed

@@ -1,413 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-<meta charset="UTF-8"/>
-<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
-<title>Deepfake Authenticator</title>
-<script src="https://cdn.tailwindcss.com"></script>
-<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet"/>
-<style>
-:root{--g:#00ff88;--r:#ff3355;--w:#ffaa00;--bg:#050508;--card:rgba(255,255,255,0.04);--border:rgba(0,255,136,0.18);--muted:#5a6a7a;}
-*{box-sizing:border-box;margin:0;padding:0;}
-body{background:var(--bg);font-family:'Space Grotesk',sans-serif;color:#e2e8f0;min-height:100vh;overflow-x:hidden;}
-code,pre,.mono{font-family:'JetBrains Mono',monospace;}
-::-webkit-scrollbar{width:5px;} ::-webkit-scrollbar-track{background:var(--bg);} ::-webkit-scrollbar-thumb{background:rgba(0,255,136,0.25);border-radius:4px;}
-.hidden{display:none!important;}
-</style>
-</head>
-<body>
-<style>
-/* ── Particle Canvas ── */
-#particles{position:fixed;inset:0;z-index:0;pointer-events:none;}
-/* ── Grid overlay ── */
-.grid-bg{position:fixed;inset:0;z-index:0;pointer-events:none;
-  background-image:linear-gradient(rgba(0,255,136,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,136,0.03) 1px,transparent 1px);
-  background-size:60px 60px;}
-/* ── Glass ── */
-.glass{background:var(--card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:16px;box-shadow:0 8px 40px rgba(0,0,0,0.5);}
-.glass-sm{background:rgba(255,255,255,0.03);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.07);border-radius:12px;}
-/* ── Glow borders ── */
-.glow-green{box-shadow:0 0 20px rgba(0,255,136,0.25),inset 0 0 20px rgba(0,255,136,0.04);}
-.glow-red{box-shadow:0 0 20px rgba(255,51,85,0.25),inset 0 0 20px rgba(255,51,85,0.04);}
-/* ── Header ── */
-header{position:sticky;top:0;z-index:50;background:rgba(5,5,8,0.85);backdrop-filter:blur(24px);border-bottom:1px solid rgba(0,255,136,0.1);}
-/* ── Eye SVG animation ── */
-@keyframes scanPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.5;transform:scale(1.15);}}
-@keyframes eyeScan{0%{stroke-dashoffset:100;}100%{stroke-dashoffset:0;}}
-.eye-scan{animation:scanPulse 2.5s ease-in-out infinite;}
-/* ── Status dot ── */
-@keyframes statusBlink{0%,100%{opacity:1;box-shadow:0 0 6px var(--g);}50%{opacity:0.4;box-shadow:none;}}
-.status-dot{width:8px;height:8px;border-radius:50%;background:var(--g);animation:statusBlink 2s ease-in-out infinite;}
-/* ── Drop zone border animation ── */
-@keyframes borderDash{to{stroke-dashoffset:-20;}}
-#dropZone{border:2px dashed rgba(0,255,136,0.25);border-radius:16px;cursor:pointer;min-height:200px;display:flex;align-items:center;justify-content:center;transition:all 0.35s ease;position:relative;overflow:hidden;}
-#dropZone:hover,#dropZone.drag-over{border-color:var(--g);background:rgba(0,255,136,0.04);box-shadow:0 0 40px rgba(0,255,136,0.2),inset 0 0 30px rgba(0,255,136,0.06);transform:scale(1.01);}
-/* ── Orbit ring ── */
-@keyframes orbitRing{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
-.orbit{animation:orbitRing 3s linear infinite;transform-origin:center;}
-/* ── Analyze button ── */
-#analyzeBtn{width:100%;padding:16px;border-radius:12px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px;letter-spacing:0.12em;text-transform:uppercase;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.05);color:var(--muted);cursor:not-allowed;transition:all 0.3s ease;position:relative;overflow:hidden;}
-#analyzeBtn.active{background:linear-gradient(135deg,#00ff88,#00cc66);color:#050508;border-color:transparent;cursor:pointer;box-shadow:0 0 30px rgba(0,255,136,0.4);}
-#analyzeBtn.active:hover{transform:translateY(-2px) scale(1.01);box-shadow:0 0 50px rgba(0,255,136,0.6);}
-#analyzeBtn.active::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.25),transparent);animation:shimmer 2s ease infinite;}
-@keyframes shimmer{to{left:150%;}}
-#analyzeBtn:disabled{opacity:0.45;cursor:not-allowed;transform:none!important;}
-</style>
-<style>
-/* ── Loading ── */
-@keyframes radarSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
-@keyframes radarPulse{0%,100%{opacity:0.8;transform:scale(1);}50%{opacity:0.3;transform:scale(1.05);}}
-.radar-ring{border-radius:50%;border:1px solid rgba(0,255,136,0.2);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
-.radar-sweep{position:absolute;top:50%;left:50%;width:50%;height:2px;transform-origin:left center;background:linear-gradient(90deg,transparent,var(--g));animation:radarSpin 2s linear infinite;}
-/* ── Agent cards ── */
-.agent-card{transition:all 0.4s ease;border:1px solid rgba(255,255,255,0.06);border-radius:12px;padding:12px 16px;background:rgba(255,255,255,0.02);}
-.agent-card.active{border-color:var(--g);background:rgba(0,255,136,0.06);box-shadow:0 0 20px rgba(0,255,136,0.15);}
-.agent-card.active .agent-dot{background:var(--g);box-shadow:0 0 8px var(--g);}
-.agent-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.15);transition:all 0.4s ease;flex-shrink:0;}
-/* ── Progress bar ── */
-.prog-track{height:4px;background:rgba(255,255,255,0.06);border-radius:99px;overflow:hidden;}
-.prog-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#00aaff,var(--g));box-shadow:0 0 12px var(--g);transition:width 0.5s ease;}
-/* ── Verdict ── */
-@keyframes glitch{0%,100%{text-shadow:0 0 10px var(--r);}20%{text-shadow:-2px 0 #ff0,2px 0 #0ff,0 0 20px var(--r);}40%{text-shadow:2px 0 #ff0,-2px 0 #0ff,0 0 10px var(--r);}60%{text-shadow:0 0 30px var(--r);}}
-.glitch-text{animation:glitch 3s ease-in-out infinite;}
-@keyframes fadeUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}
-.fade-up{animation:fadeUp 0.6s cubic-bezier(0.16,1,0.3,1) both;}
-@keyframes slideInLeft{from{opacity:0;transform:translateX(-20px);}to{opacity:1;transform:none;}}
-/* ── Verdict badge ── */
-.verdict-badge{width:110px;height:110px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2.8rem;transition:all 0.5s;border:2px solid var(--border);}
-@keyframes pulseFake{0%,100%{box-shadow:0 0 20px rgba(255,51,85,0.3);}50%{box-shadow:0 0 50px rgba(255,51,85,0.7);}}
-@keyframes pulseReal{0%,100%{box-shadow:0 0 20px rgba(0,255,136,0.3);}50%{box-shadow:0 0 50px rgba(0,255,136,0.7);}}
-.verdict-badge.fake{border-color:var(--r);animation:pulseFake 2s infinite;}
-.verdict-badge.real{border-color:var(--g);animation:pulseReal 2s infinite;}
-/* ── Confidence arc (CSS semicircle gauge) ── */
-.gauge-wrap{position:relative;width:200px;height:110px;overflow:hidden;margin:0 auto;}
-.gauge-bg{width:200px;height:200px;border-radius:50%;border:12px solid rgba(255,255,255,0.06);position:absolute;top:0;left:0;clip-path:inset(0 0 50% 0);}
-.gauge-fill{width:200px;height:200px;border-radius:50%;border:12px solid transparent;position:absolute;top:0;left:0;clip-path:inset(0 0 50% 0);transition:transform 1.2s cubic-bezier(0.22,1,0.36,1);}
-.gauge-fill.fake{border-color:var(--r);box-shadow:0 0 20px rgba(255,51,85,0.5);}
-.gauge-fill.real{border-color:var(--g);box-shadow:0 0 20px rgba(0,255,136,0.5);}
-/* ── Conf bar ── */
-.conf-track{height:10px;background:rgba(255,255,255,0.05);border-radius:99px;overflow:hidden;border:1px solid rgba(255,255,255,0.05);}
-.conf-fill{height:100%;border-radius:99px;transition:width 1.2s cubic-bezier(0.22,1,0.36,1);}
-.conf-fill.fake{background:linear-gradient(90deg,#880022,var(--r));box-shadow:0 0 15px rgba(255,51,85,0.6);}
-.conf-fill.real{background:linear-gradient(90deg,#00aaff,var(--g));box-shadow:0 0 15px rgba(0,255,136,0.6);}
-/* ── Risk needle ── */
-#riskNeedle{display:inline-block;padding:4px 14px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:0.15em;border:1px solid;transition:all 0.5s;}
-/* ── Insight bullets ── */
-.insight-item{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-radius:10px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);font-size:13px;line-height:1.6;color:#a0aec0;animation:slideInLeft 0.4s ease both;}
-.insight-item:hover{background:rgba(255,255,255,0.04);}
-.insight-dot{flex-shrink:0;width:8px;height:8px;border-radius:50%;margin-top:6px;}
-/* ── Timeline bars ── */
-.bar-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;min-width:0;position:relative;}
-.bar-outer{width:100%;background:rgba(255,255,255,0.05);border-radius:4px 4px 0 0;overflow:hidden;position:relative;}
-.bar-inner{width:100%;border-radius:4px 4px 0 0;transition:height 0.8s cubic-bezier(0.22,1,0.36,1);}
-.bar-wrap:hover .bar-tooltip{opacity:1;transform:translateY(-4px);}
-.bar-tooltip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:rgba(10,10,20,0.95);border:1px solid rgba(255,255,255,0.1);border-radius:6px;padding:4px 8px;font-size:10px;white-space:nowrap;pointer-events:none;opacity:0;transition:all 0.2s ease;z-index:10;font-family:'JetBrains Mono',monospace;}
-/* ── Meta grid ── */
-.meta-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.05);}
-.meta-row:last-child{border-bottom:none;}
-/* ── Error ── */
-#errorSection{border-color:rgba(255,51,85,0.3)!important;background:rgba(255,51,85,0.04)!important;}
-/* ── Stat pills ── */
-.stat-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:99px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);font-size:12px;font-weight:600;letter-spacing:0.05em;color:#a0aec0;}
-.stat-pill .pip{width:6px;height:6px;border-radius:50%;background:var(--g);box-shadow:0 0 6px var(--g);}
-/* ── Section label ── */
-.sec-label{font-size:10px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:#00aaff;display:flex;align-items:center;gap:8px;margin-bottom:14px;}
-.sec-label::before{content:'';display:inline-block;width:3px;height:14px;background:#00aaff;border-radius:2px;box-shadow:0 0 8px #00aaff;}
-/* ── Model badge ── */
-#modelBadge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:99px;background:rgba(0,255,136,0.08);border:1px solid rgba(0,255,136,0.25);font-size:11px;font-weight:600;letter-spacing:0.1em;color:var(--g);}
-</style>
-<!-- Particle canvas + grid -->
-<canvas id="particles"></canvas>
-<div class="grid-bg"></div>
-<!-- ══ HEADER ══ -->
-<header>
-  <div style="max-width:1100px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between;">
-    <div style="display:flex;align-items:center;gap:14px;">
-      <!-- Animated eye logo -->
-      <div class="eye-scan" style="width:36px;height:36px;display:flex;align-items:center;justify-content:center;">
-        <svg width="36" height="36" viewBox="0 0 36 36" fill="none">
-          <ellipse cx="18" cy="18" rx="14" ry="9" stroke="#00ff88" stroke-width="1.5" opacity="0.9"/>
-          <circle cx="18" cy="18" r="5" fill="#00ff88" opacity="0.9"/>
-          <circle cx="18" cy="18" r="2.5" fill="#050508"/>
-          <path d="M4 18 Q18 4 32 18" stroke="#00ff88" stroke-width="0.8" stroke-dasharray="4 3" opacity="0.4">
-            <animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="8s" repeatCount="indefinite"/>
-          </path>
-        </svg>
-      </div>
-      <div>
-        <div style="font-size:13px;font-weight:700;letter-spacing:0.18em;color:#fff;">DEEPFAKE AUTHENTICATOR</div>
-        <div style="font-size:9px;letter-spacing:0.25em;color:var(--muted);font-family:'JetBrains Mono',monospace;">AI-POWERED VIDEO FORENSICS</div>
-      </div>
-    </div>
-    <div id="modelBadge">
-      <div class="status-dot"></div>
-      <span>ViT ENSEMBLE</span>
-    </div>
-  </div>
-</header>
-<!-- ══ MAIN ══ -->
-<div style="position:relative;z-index:1;max-width:860px;margin:0 auto;padding:48px 24px 80px;">
-  <!-- Hero -->
-  <div class="fade-up" style="text-align:center;margin-bottom:48px;animation-delay:0.1s;">
-    <h1 style="font-size:clamp(2rem,5vw,3.5rem);font-weight:700;line-height:1.1;margin-bottom:16px;background:linear-gradient(135deg,#fff 30%,var(--g));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;">Is This Video Real?</h1>
-    <p style="color:var(--muted);font-size:15px;max-width:480px;margin:0 auto 28px;line-height:1.7;">Advanced AI ensemble detects facial manipulation with 99%+ accuracy using dual Vision Transformer models.</p>
-    <div style="display:flex;flex-wrap:wrap;gap:10px;justify-content:center;">
-      <div class="stat-pill"><span class="pip"></span>2 ViT Models</div>
-      <div class="stat-pill"><span class="pip"></span>40 Frame Analysis</div>
-      <div class="stat-pill"><span class="pip"></span>&lt; 15s Detection</div>
-    </div>
-  </div>
-  <!-- ══ UPLOAD SECTION ══ -->
-  <section id="uploadSection" class="glass fade-up" style="padding:32px;margin-bottom:24px;animation-delay:0.2s;">
-    <div id="dropZone">
-      <!-- Upload prompt -->
-      <div id="uploadPrompt" style="text-align:center;padding:40px 24px;">
-        <div style="position:relative;width:80px;height:80px;margin:0 auto 20px;">
-          <div style="position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(0,255,136,0.3);" class="orbit"></div>
-          <div style="position:absolute;inset:8px;border-radius:50%;border:1px solid rgba(0,255,136,0.15);"></div>
-          <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;">
-            <svg width="32" height="32" fill="none" stroke="#00ff88" stroke-width="1.5" viewBox="0 0 24 24" opacity="0.8">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"/>
-            </svg>
-          </div>
-        </div>
-        <h3 style="font-size:17px;font-weight:600;color:#fff;margin-bottom:8px;">Drop Video for Forensic Analysis</h3>
-        <p style="font-size:13px;color:var(--muted);">Drag &amp; drop or click to browse</p>
-        <p style="font-size:11px;color:var(--muted);margin-top:12px;opacity:0.6;font-family:'JetBrains Mono',monospace;">MP4 · AVI · MOV · MKV · WebM — Max 100MB</p>
-      </div>
-      <!-- File chosen state -->
-      <div id="fileChosen" class="hidden" style="width:100%;padding:28px 32px;display:flex;align-items:center;gap:20px;">
-        <div style="width:56px;height:56px;border-radius:12px;background:rgba(0,255,136,0.1);border:1px solid rgba(0,255,136,0.3);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 20px rgba(0,255,136,0.15);">
-          <svg width="28" height="28" fill="none" stroke="#00ff88" stroke-width="1.5" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z"/>
-          </svg>
-        </div>
-        <div style="flex:1;min-width:0;">
-          <p id="chosenName" style="font-size:14px;font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"></p>
-          <p id="chosenSize" style="font-size:12px;color:var(--muted);margin-top:4px;font-family:'JetBrains Mono',monospace;"></p>
-        </div>
-        <button id="clearBtn" style="padding:8px;color:var(--muted);background:none;border:none;cursor:pointer;border-radius:8px;transition:all 0.2s;" onmouseover="this.style.color='#ff3355';this.style.background='rgba(255,51,85,0.1)'" onmouseout="this.style.color='var(--muted)';this.style.background='none'">
-          <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
-        </button>
-      </div>
-    </div>
-    <input type="file" id="fileInput" accept="video/*" style="display:none;"/>
-    <div style="margin-top:20px;">
-      <button id="analyzeBtn" disabled>
-        <span id="analyzeBtnText">Analyze Video</span>
-      </button>
-    </div>
-  </section>
-  <!-- ══ LOADING SECTION ══ -->
-  <section id="loadingSection" class="hidden glass fade-up" style="padding:48px 32px;text-align:center;margin-bottom:24px;">
-    <!-- Radar -->
-    <div style="position:relative;width:140px;height:140px;margin:0 auto 36px;">
-      <div class="radar-ring" style="width:140px;height:140px;"></div>
-      <div class="radar-ring" style="width:100px;height:100px;"></div>
-      <div class="radar-ring" style="width:60px;height:60px;"></div>
-      <div class="radar-sweep" style="width:70px;top:50%;left:50%;transform-origin:left center;"></div>
-      <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;background:var(--g);box-shadow:0 0 15px var(--g);"></div>
-    </div>
-    <!-- Status -->
-    <p id="loadingStatus" style="font-size:11px;font-weight:700;letter-spacing:0.2em;color:#00aaff;text-transform:uppercase;margin-bottom:20px;font-family:'JetBrains Mono',monospace;">Initializing sequence...</p>
-    <!-- Progress -->
-    <div style="max-width:400px;margin:0 auto 32px;">
-      <div class="prog-track">
-        <div id="progressBar" style="width:0%;" class="prog-fill"></div>
-      </div>
-    </div>
-    <!-- Agent cards -->
-    <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:500px;margin:0 auto;">
-      <div id="ag0" class="agent-card" style="display:flex;align-items:center;gap:10px;">
-        <div class="agent-dot"></div>
-        <div style="text-align:left;">
-          <div style="font-size:11px;font-weight:600;color:#fff;letter-spacing:0.05em;">Frame Extractor</div>
-          <div style="font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;">Sampling keyframes</div>
-        </div>
-      </div>
-      <div id="ag1" class="agent-card" style="display:flex;align-items:center;gap:10px;">
-        <div class="agent-dot"></div>
-        <div style="text-align:left;">
-          <div style="font-size:11px;font-weight:600;color:#fff;letter-spacing:0.05em;">Face Detector</div>
-          <div style="font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;">Isolating regions</div>
-        </div>
-      </div>
-      <div id="ag2" class="agent-card" style="display:flex;align-items:center;gap:10px;">
-        <div class="agent-dot"></div>
-        <div style="text-align:left;">
-          <div style="font-size:11px;font-weight:600;color:#fff;letter-spacing:0.05em;">ViT Ensemble</div>
-          <div style="font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;">Neural inference</div>
-        </div>
-      </div>
-      <div id="ag3" class="agent-card" style="display:flex;align-items:center;gap:10px;">
-        <div class="agent-dot"></div>
-        <div style="text-align:left;">
-          <div style="font-size:11px;font-weight:600;color:#fff;letter-spacing:0.05em;">Report Builder</div>
-          <div style="font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;">Compiling results</div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <!-- ══ RESULT SECTION ══ -->
-  <section id="resultSection" class="hidden fade-up" style="display:flex;flex-direction:column;gap:20px;">
-    <!-- Verdict Card -->
-    <div id="verdictCard" class="glass" style="padding:40px;display:flex;flex-wrap:wrap;align-items:center;gap:36px;">
-      <!-- Badge + label -->
-      <div style="display:flex;flex-direction:column;align-items:center;flex-shrink:0;">
-        <div id="verdictBadge" class="verdict-badge" style="margin-bottom:14px;background:rgba(5,5,8,0.8);">
-          <span id="verdictEmoji" style="font-size:2.5rem;"></span>
-        </div>
-        <div id="verdictLabel" style="font-size:28px;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;"></div>
-        <div style="font-size:9px;color:var(--muted);letter-spacing:0.25em;margin-top:4px;font-family:'JetBrains Mono',monospace;">VERDICT</div>
-      </div>
-      <!-- Confidence + risk -->
-      <div style="flex:1;min-width:220px;">
-        <div style="display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;">
-          <span style="font-size:10px;color:var(--muted);letter-spacing:0.15em;text-transform:uppercase;">Confidence Score</span>
-          <span id="confValue" style="font-size:36px;font-weight:700;font-family:'JetBrains Mono',monospace;"></span>
-        </div>
-        <div class="conf-track" style="margin-bottom:20px;">
-          <div id="confBar" class="conf-fill" style="width:0%;"></div>
-        </div>
-        <div class="glass-sm" style="padding:14px 18px;display:flex;align-items:center;justify-content:space-between;">
-          <span style="font-size:10px;color:var(--muted);letter-spacing:0.15em;text-transform:uppercase;">Risk Assessment</span>
-          <span id="riskNeedle"></span>
-        </div>
-        <div style="margin-top:12px;text-align:right;">
-          <span id="riskLabel" style="font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace;"></span>
-        </div>
-      </div>
-    </div>
-    <!-- Insights + Meta -->
-    <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;">
-      <div class="glass" style="padding:24px;">
-        <div class="sec-label">Analysis Insights</div>
-        <div id="detailsList" style="display:flex;flex-direction:column;gap:10px;"></div>
-      </div>
-      <div class="glass" style="padding:24px;display:flex;flex-direction:column;justify-content:space-between;">
-        <div>
-          <div class="sec-label">Video Metadata</div>
-          <div id="metaGrid"></div>
-        </div>
-        <div style="margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.05);display:flex;align-items:center;gap:8px;">
-          <div style="width:6px;height:6px;border-radius:50%;background:var(--g);box-shadow:0 0 6px var(--g);"></div>
-          <span style="font-size:10px;color:var(--muted);letter-spacing:0.15em;text-transform:uppercase;font-family:'JetBrains Mono',monospace;">Models: ViT Ensemble</span>
-        </div>
-      </div>
-    </div>
-    <!-- Frame Timeline -->
-    <div class="glass" style="padding:24px;">
-      <div class="sec-label">Frame Analysis Timeline</div>
-      <div id="timelineChart" style="display:flex;align-items:flex-end;gap:3px;height:80px;position:relative;padding-bottom:20px;"></div>
-      <div style="display:flex;justify-content:space-between;margin-top:8px;">
-        <span style="font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;">Frame 0</span>
-        <span style="font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;">Frame 40</span>
-      </div>
-    </div>
-    <!-- ══ AUDIO ANALYSIS CARD ══ -->
-    <div id="audioSection" class="hidden glass fade-up" style="padding:28px;">
-      <div class="sec-label" style="margin-bottom:18px;">
-        <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" style="flex-shrink:0;"><path stroke-linecap="round" stroke-linejoin="round" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"/></svg>
-        VOICE AUTHENTICITY ANALYSIS
-      </div>
-      <div style="display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-bottom:20px;">
-        <div id="audioBadge" style="padding:8px 18px;border-radius:99px;font-size:12px;font-weight:700;letter-spacing:0.1em;border:1px solid;transition:all .4s;"></div>
-        <div style="flex:1;min-width:160px;">
-          <div class="conf-track">
-            <div id="audioBar" class="conf-fill" style="width:0%;transition:width 1.2s cubic-bezier(0.22,1,0.36,1);"></div>
-          </div>
-        </div>
-      </div>
-      <div style="display:flex;gap:16px;margin-bottom:20px;flex-wrap:wrap;">
-        <div class="glass-sm" style="padding:12px 18px;flex:1;min-width:120px;text-align:center;">
-          <div style="font-size:10px;color:var(--muted);letter-spacing:.1em;margin-bottom:4px;">WAV2VEC2 MODEL</div>
-          <div id="audioModelScore" style="font-size:22px;font-weight:700;font-family:'JetBrains Mono',monospace;color:#fff;"></div>
-        </div>
-        <div class="glass-sm" style="padding:12px 18px;flex:1;min-width:120px;text-align:center;">
-          <div style="font-size:10px;color:var(--muted);letter-spacing:.1em;margin-bottom:4px;">SIGNAL HEURISTICS</div>
-          <div id="audioHeurScore" style="font-size:22px;font-weight:700;font-family:'JetBrains Mono',monospace;color:#fff;"></div>
-        </div>
-      </div>
-      <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
-        <div>
-          <div style="font-size:10px;color:var(--muted);letter-spacing:.12em;margin-bottom:10px;">VOICE INSIGHTS</div>
-          <div id="audioDetailsList" style="display:flex;flex-direction:column;gap:8px;"></div>
-        </div>
-        <div>
-          <div style="font-size:10px;color:var(--muted);letter-spacing:.12em;margin-bottom:10px;">SIGNAL FEATURES</div>
-          <div id="audioFeatGrid"></div>
-        </div>
-      </div>
-    </div>
-    <!-- Reset -->
-    <div style="text-align:center;margin-top:8px;">
-      <button onclick="resetAll()" style="padding:12px 28px;font-size:11px;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:var(--muted);background:none;border:1px solid rgba(255,255,255,0.1);border-radius:10px;cursor:pointer;transition:all 0.3s;font-family:'Space Grotesk',sans-serif;" onmouseover="this.style.color='var(--g)';this.style.borderColor='rgba(0,255,136,0.4)';this.style.background='rgba(0,255,136,0.05)'" onmouseout="this.style.color='var(--muted)';this.style.borderColor='rgba(255,255,255,0.1)';this.style.background='none'">
-        ↻ &nbsp;Analyze Another Video
-      </button>
-    </div>
-  </section>
-  <!-- ══ ERROR SECTION ══ -->
-  <section id="errorSection" class="hidden glass fade-up" style="padding:28px 32px;margin-bottom:24px;">
-    <div style="display:flex;align-items:center;gap:12px;margin-bottom:10px;">
-      <svg width="22" height="22" fill="none" stroke="#ff3355" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
-      <span style="font-size:12px;font-weight:700;letter-spacing:0.2em;color:#ff3355;text-transform:uppercase;font-family:'JetBrains Mono',monospace;">Analysis Failed</span>
-    </div>
-    <p id="errorMsg" style="font-size:13px;color:var(--muted);margin-left:34px;line-height:1.6;"></p>
-    <div style="margin-left:34px;margin-top:16px;">
-      <button onclick="resetAll()" style="font-size:11px;color:rgba(255,255,255,0.4);background:none;border:none;cursor:pointer;letter-spacing:0.15em;text-transform:uppercase;font-family:'Space Grotesk',sans-serif;transition:color 0.2s;" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='rgba(255,255,255,0.4)'">↻ Try Again</button>
-    </div>
-  </section>
-</div><!-- /main -->
-<footer style="position:relative;z-index:1;text-align:center;padding:24px;font-size:10px;color:rgba(90,106,122,0.5);letter-spacing:0.2em;text-transform:uppercase;font-family:'JetBrains Mono',monospace;">
-  Deepfake Authenticator &nbsp;·&nbsp; Secure Local Inference &nbsp;·&nbsp; ViT Ensemble v2
-</footer>
-<script>
-// ── Particle background ──────────────────────────────────────────────────────
-(function(){
-  const c=document.getElementById('particles');
-  const ctx=c.getContext('2d');
-  let W,H,pts=[];
-  function resize(){W=c.width=window.innerWidth;H=c.height=window.innerHeight;}
-  resize();window.addEventListener('resize',resize);
-  for(let i=0;i<60;i++)pts.push({x:Math.random()*W,y:Math.random()*H,vx:(Math.random()-0.5)*0.3,vy:(Math.random()-0.5)*0.3,r:Math.random()*1.5+0.5,a:Math.random()});
-  function draw(){
-    ctx.clearRect(0,0,W,H);
-    pts.forEach(p=>{
-      p.x+=p.vx;p.y+=p.vy;
-      if(p.x<0||p.x>W)p.vx*=-1;
-      if(p.y<0||p.y>H)p.vy*=-1;
-      ctx.beginPath();ctx.arc(p.x,p.y,p.r,0,Math.PI*2);
-      ctx.fillStyle=`rgba(0,255,136,${0.15+p.a*0.2})`;ctx.fill();
-    });
-    // draw connections
-    for(let i=0;i<pts.length;i++)for(let j=i+1;j<pts.length;j++){
-      const dx=pts[i].x-pts[j].x,dy=pts[i].y-pts[j].y,d=Math.sqrt(dx*dx+dy*dy);
-      if(d<120){ctx.beginPath();ctx.moveTo(pts[i].x,pts[i].y);ctx.lineTo(pts[j].x,pts[j].y);ctx.strokeStyle=`rgba(0,255,136,${0.06*(1-d/120)})`;ctx.lineWidth=0.5;ctx.stroke();}
-    }
-    requestAnimationFrame(draw);
-  }
-  draw();
-})();
-</script>
-<script src="script.js?v=3"></script>
-</body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Deepfake Authenticator</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

frontend/package-lock.json CHANGED Viewed

@@ -8,13 +8,18 @@
       "name": "frontend",
       "version": "0.0.0",
       "dependencies": {
         "@tailwindcss/vite": "^4.2.4",
         "autoprefixer": "^10.5.0",
         "postcss": "^8.5.10",
         "react": "^19.2.5",
         "react-dom": "^19.2.5",
         "styled-components": "^6.4.1",
-        "tailwindcss": "^4.2.4"
       },
       "devDependencies": {
         "@eslint/js": "^10.0.1",
@@ -220,6 +225,15 @@
         "node": ">=6.0.0"
       }
     },
     "node_modules/@babel/template": {
       "version": "7.28.6",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
@@ -268,6 +282,12 @@
         "node": ">=6.9.0"
       }
     },
     "node_modules/@emnapi/core": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
@@ -553,6 +573,24 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
     "node_modules/@napi-rs/wasm-runtime": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.4.tgz",
@@ -575,11 +613,100 @@
       "version": "0.127.0",
       "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.127.0.tgz",
       "integrity": "sha512-aIYXQBo4lCbO4z0R3FHeucQHpF46l2LbMdxRvqvuRuW2OxdnSkcng5B8+K12spgLDj93rtN3+J2Vac/TIO+ciQ==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/Boshen"
       }
     },
     "node_modules/@rolldown/binding-android-arm64": {
       "version": "1.0.0-rc.17",
       "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.0-rc.17.tgz",
@@ -587,6 +714,7 @@
       "cpu": [
         "arm64"
       ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -603,6 +731,7 @@
       "cpu": [
         "arm64"
       ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -619,6 +748,7 @@
       "cpu": [
         "x64"
       ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -635,6 +765,7 @@
       "cpu": [
         "x64"
       ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -651,6 +782,7 @@
       "cpu": [
         "arm"
       ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -667,6 +799,7 @@
       "cpu": [
         "arm64"
       ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -683,6 +816,7 @@
       "cpu": [
         "arm64"
       ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -699,6 +833,7 @@
       "cpu": [
         "ppc64"
       ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -715,6 +850,7 @@
       "cpu": [
         "s390x"
       ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -731,6 +867,7 @@
       "cpu": [
         "x64"
       ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -747,6 +884,7 @@
       "cpu": [
         "x64"
       ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -763,6 +901,7 @@
       "cpu": [
         "arm64"
       ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -779,6 +918,7 @@
       "cpu": [
         "wasm32"
       ],
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -797,6 +937,7 @@
       "cpu": [
         "arm64"
       ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -813,6 +954,7 @@
       "cpu": [
         "x64"
       ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1086,6 +1228,12 @@
         "vite": "^5.2.0 || ^6 || ^7 || ^8"
       }
     },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.1",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
@@ -1096,6 +1244,12 @@
         "tslib": "^2.4.0"
       }
     },
     "node_modules/@types/esrecurse": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/@types/esrecurse/-/esrecurse-4.3.1.tgz",
@@ -1117,6 +1271,12 @@
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/react": {
       "version": "19.2.14",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
@@ -1137,6 +1297,59 @@
         "@types/react": "^19.2.0"
       }
     },
     "node_modules/@vitejs/plugin-react": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-6.0.1.tgz",
@@ -1249,6 +1462,26 @@
         "node": "18 || 20 || >=22"
       }
     },
     "node_modules/baseline-browser-mapping": {
       "version": "2.10.21",
       "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.21.tgz",
@@ -1261,6 +1494,15 @@
         "node": ">=6.0.0"
       }
     },
     "node_modules/brace-expansion": {
       "version": "5.0.5",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.5.tgz",
@@ -1307,6 +1549,30 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
     "node_modules/camelize": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
@@ -1316,6 +1582,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001790",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001790.tgz",
@@ -1343,11 +1622,28 @@
       "dev": true,
       "license": "MIT"
     },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
       "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
@@ -1409,6 +1705,15 @@
       "dev": true,
       "license": "MIT"
     },
     "node_modules/detect-libc": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
@@ -1418,6 +1723,12 @@
         "node": ">=8"
       }
     },
     "node_modules/electron-to-chromium": {
       "version": "1.5.344",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.344.tgz",
@@ -1666,6 +1977,7 @@
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
       "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
       "license": "MIT",
       "engines": {
         "node": ">=12.0.0"
@@ -1679,6 +1991,12 @@
         }
       }
     },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -1743,10 +2061,38 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
@@ -1793,6 +2139,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
@@ -1816,6 +2168,32 @@
         "hermes-estree": "0.25.1"
       }
     },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -1826,6 +2204,12 @@
         "node": ">= 4"
       }
     },
     "node_modules/imurmurhash": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
@@ -1859,13 +2243,30 @@
         "node": ">=0.10.0"
       }
     },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/jiti": {
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
@@ -1953,6 +2354,15 @@
         "node": ">= 0.8.0"
       }
     },
     "node_modules/lightningcss": {
       "version": "1.32.0",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
@@ -2228,6 +2638,16 @@
         "yallist": "^3.0.2"
       }
     },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@@ -2237,6 +2657,21 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
     "node_modules/minimatch": {
       "version": "10.2.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
@@ -2253,6 +2688,21 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -2355,7 +2805,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -2371,6 +2820,7 @@
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -2413,6 +2863,12 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "license": "MIT"
     },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -2423,6 +2879,16 @@
         "node": ">= 0.8.0"
       }
     },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -2454,10 +2920,35 @@
         "react": "^19.2.5"
       }
     },
     "node_modules/rolldown": {
       "version": "1.0.0-rc.17",
       "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.0.0-rc.17.tgz",
       "integrity": "sha512-ZrT53oAKrtA4+YtBWPQbtPOxIbVDbxT0orcYERKd63VJTF13zPcgXTvD4843L8pcsI7M6MErt8QtON6lrB9tyA==",
       "license": "MIT",
       "dependencies": {
         "@oxc-project/types": "=0.127.0",
@@ -2491,6 +2982,7 @@
       "version": "1.0.0-rc.17",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.17.tgz",
       "integrity": "sha512-n8iosDOt6Ig1UhJ2AYqoIhHWh/isz0xpicHTzpKBeotdVsTEcxsSA/i3EVM7gQAj0rU27OLAxCjzlj15IWY7bg==",
       "license": "MIT"
     },
     "node_modules/scheduler": {
@@ -2513,7 +3005,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "shebang-regex": "^3.0.0"
@@ -2526,7 +3017,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -2541,6 +3031,32 @@
         "node": ">=0.10.0"
       }
     },
     "node_modules/styled-components": {
       "version": "6.4.1",
       "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.4.1.tgz",
@@ -2583,6 +3099,15 @@
       "integrity": "sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==",
       "license": "MIT"
     },
     "node_modules/tailwindcss": {
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.4.tgz",
@@ -2602,10 +3127,49 @@
         "url": "https://opencollective.com/webpack"
       }
     },
     "node_modules/tinyglobby": {
       "version": "0.2.16",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.16.tgz",
       "integrity": "sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==",
       "license": "MIT",
       "dependencies": {
         "fdir": "^6.5.0",
@@ -2618,12 +3182,78 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
     "node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "license": "0BSD",
-      "optional": true
     },
     "node_modules/type-check": {
       "version": "0.4.0",
@@ -2678,10 +3308,29 @@
         "punycode": "^2.1.0"
       }
     },
     "node_modules/vite": {
       "version": "8.0.10",
       "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.10.tgz",
       "integrity": "sha512-rZuUu9j6J5uotLDs+cAA4O5H4K1SfPliUlQwqa6YEwSrWDZzP4rhm00oJR5snMewjxF5V/K3D4kctsUTsIU9Mw==",
       "license": "MIT",
       "dependencies": {
         "lightningcss": "^1.32.0",
@@ -2755,11 +3404,21 @@
         }
       }
     },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "isexe": "^2.0.0"
@@ -2823,6 +3482,35 @@
       "peerDependencies": {
         "zod": "^3.25.0 || ^4.0.0"
       }
     }
   }
 }

       "name": "frontend",
       "version": "0.0.0",
       "dependencies": {
+        "@react-three/drei": "^10.7.7",
+        "@react-three/fiber": "^9.6.0",
         "@tailwindcss/vite": "^4.2.4",
         "autoprefixer": "^10.5.0",
+        "framer-motion": "^12.38.0",
         "postcss": "^8.5.10",
         "react": "^19.2.5",
         "react-dom": "^19.2.5",
         "styled-components": "^6.4.1",
+        "tailwindcss": "^4.2.4",
+        "three": "^0.184.0",
+        "zustand": "^5.0.12"
       },
       "devDependencies": {
         "@eslint/js": "^10.0.1",
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.2.tgz",
+      "integrity": "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.28.6",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@dimforge/rapier3d-compat": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@dimforge/rapier3d-compat/-/rapier3d-compat-0.12.0.tgz",
+      "integrity": "sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow==",
+      "license": "Apache-2.0"
+    },
     "node_modules/@emnapi/core": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@mediapipe/tasks-vision": {
+      "version": "0.10.17",
+      "resolved": "https://registry.npmjs.org/@mediapipe/tasks-vision/-/tasks-vision-0.10.17.tgz",
+      "integrity": "sha512-CZWV/q6TTe8ta61cZXjfnnHsfWIdFhms03M9T7Cnd5y2mdpylJM0rF1qRq+wsQVRMLz1OYPVEBU9ph2Bx8cxrg==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@monogrid/gainmap-js": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@monogrid/gainmap-js/-/gainmap-js-3.4.0.tgz",
+      "integrity": "sha512-2Z0FATFHaoYJ8b+Y4y4Hgfn3FRFwuU5zRrk+9dFWp4uGAdHGqVEdP7HP+gLA3X469KXHmfupJaUbKo1b/aDKIg==",
+      "license": "MIT",
+      "dependencies": {
+        "promise-worker-transferable": "^1.0.4"
+      },
+      "peerDependencies": {
+        "three": ">= 0.159.0"
+      }
+    },
     "node_modules/@napi-rs/wasm-runtime": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.4.tgz",
       "version": "0.127.0",
       "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.127.0.tgz",
       "integrity": "sha512-aIYXQBo4lCbO4z0R3FHeucQHpF46l2LbMdxRvqvuRuW2OxdnSkcng5B8+K12spgLDj93rtN3+J2Vac/TIO+ciQ==",
+      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/Boshen"
       }
     },
+    "node_modules/@react-three/drei": {
+      "version": "10.7.7",
+      "resolved": "https://registry.npmjs.org/@react-three/drei/-/drei-10.7.7.tgz",
+      "integrity": "sha512-ff+J5iloR0k4tC++QtD/j9u3w5fzfgFAWDtAGQah9pF2B1YgOq/5JxqY0/aVoQG5r3xSZz0cv5tk2YuBob4xEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.26.0",
+        "@mediapipe/tasks-vision": "0.10.17",
+        "@monogrid/gainmap-js": "^3.0.6",
+        "@use-gesture/react": "^10.3.1",
+        "camera-controls": "^3.1.0",
+        "cross-env": "^7.0.3",
+        "detect-gpu": "^5.0.56",
+        "glsl-noise": "^0.0.0",
+        "hls.js": "^1.5.17",
+        "maath": "^0.10.8",
+        "meshline": "^3.3.1",
+        "stats-gl": "^2.2.8",
+        "stats.js": "^0.17.0",
+        "suspend-react": "^0.1.3",
+        "three-mesh-bvh": "^0.8.3",
+        "three-stdlib": "^2.35.6",
+        "troika-three-text": "^0.52.4",
+        "tunnel-rat": "^0.1.2",
+        "use-sync-external-store": "^1.4.0",
+        "utility-types": "^3.11.0",
+        "zustand": "^5.0.1"
+      },
+      "peerDependencies": {
+        "@react-three/fiber": "^9.0.0",
+        "react": "^19",
+        "react-dom": "^19",
+        "three": ">=0.159"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@react-three/fiber": {
+      "version": "9.6.0",
+      "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-9.6.0.tgz",
+      "integrity": "sha512-90abYK2q5/qDM+GACs9zRvc5KhEEpEWqWlHSd64zTPNxg+9wCJvTfyD9x2so7hlQhjRYO1Fa6flR3BC/kpTFkA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.17.8",
+        "@types/webxr": "*",
+        "base64-js": "^1.5.1",
+        "buffer": "^6.0.3",
+        "its-fine": "^2.0.0",
+        "react-use-measure": "^2.1.7",
+        "scheduler": "^0.27.0",
+        "suspend-react": "^0.1.3",
+        "use-sync-external-store": "^1.4.0",
+        "zustand": "^5.0.3"
+      },
+      "peerDependencies": {
+        "expo": ">=43.0",
+        "expo-asset": ">=8.4",
+        "expo-file-system": ">=11.0",
+        "expo-gl": ">=11.0",
+        "react": ">=19 <19.3",
+        "react-dom": ">=19 <19.3",
+        "react-native": ">=0.78",
+        "three": ">=0.156"
+      },
+      "peerDependenciesMeta": {
+        "expo": {
+          "optional": true
+        },
+        "expo-asset": {
+          "optional": true
+        },
+        "expo-file-system": {
+          "optional": true
+        },
+        "expo-gl": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rolldown/binding-android-arm64": {
       "version": "1.0.0-rc.17",
       "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.0-rc.17.tgz",
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
       "cpu": [
         "ppc64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
       "cpu": [
         "s390x"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
       "cpu": [
         "wasm32"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "vite": "^5.2.0 || ^6 || ^7 || ^8"
       }
     },
+    "node_modules/@tweenjs/tween.js": {
+      "version": "23.1.3",
+      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz",
+      "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==",
+      "license": "MIT"
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.1",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/draco3d": {
+      "version": "1.4.10",
+      "resolved": "https://registry.npmjs.org/@types/draco3d/-/draco3d-1.4.10.tgz",
+      "integrity": "sha512-AX22jp8Y7wwaBgAixaSvkoG4M/+PlAcm3Qs4OW8yT9DM4xUpWKeFhLueTAyZF39pviAdcDdeJoACapiAceqNcw==",
+      "license": "MIT"
+    },
     "node_modules/@types/esrecurse": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/@types/esrecurse/-/esrecurse-4.3.1.tgz",
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/offscreencanvas": {
+      "version": "2019.7.3",
+      "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.3.tgz",
+      "integrity": "sha512-ieXiYmgSRXUDeOntE1InxjWyvEelZGP63M+cGuquuRLuIKKT1osnkXjxev9B7d1nXSug5vpunx+gNlbVxMlC9A==",
+      "license": "MIT"
+    },
     "node_modules/@types/react": {
       "version": "19.2.14",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
         "@types/react": "^19.2.0"
       }
     },
+    "node_modules/@types/react-reconciler": {
+      "version": "0.28.9",
+      "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.28.9.tgz",
+      "integrity": "sha512-HHM3nxyUZ3zAylX8ZEyrDNd2XZOnQ0D5XfunJF5FLQnZbHHYq4UWvW1QfelQNXv1ICNkwYhfxjwfnqivYB6bFg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/stats.js": {
+      "version": "0.17.4",
+      "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.4.tgz",
+      "integrity": "sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/three": {
+      "version": "0.184.0",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.184.0.tgz",
+      "integrity": "sha512-4mY2tZAu0y0B0567w7013BBXSpsP0+Z48NJvmNo4Y/Pf76yCyz6Jw4P3tUVs10WuYNXXZ+wmHyGWpCek3amJxA==",
+      "license": "MIT",
+      "dependencies": {
+        "@dimforge/rapier3d-compat": "~0.12.0",
+        "@tweenjs/tween.js": "~23.1.3",
+        "@types/stats.js": "*",
+        "@types/webxr": ">=0.5.17",
+        "fflate": "~0.8.2",
+        "meshoptimizer": "~1.1.1"
+      }
+    },
+    "node_modules/@types/webxr": {
+      "version": "0.5.24",
+      "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.24.tgz",
+      "integrity": "sha512-h8fgEd/DpoS9CBrjEQXR+dIDraopAEfu4wYVNY2tEPwk60stPWhvZMf4Foo5FakuQ7HFZoa8WceaWFervK2Ovg==",
+      "license": "MIT"
+    },
+    "node_modules/@use-gesture/core": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/@use-gesture/core/-/core-10.3.1.tgz",
+      "integrity": "sha512-WcINiDt8WjqBdUXye25anHiNxPc0VOrlT8F6LLkU6cycrOGUDyY/yyFmsg3k8i5OLvv25llc0QC45GhR/C8llw==",
+      "license": "MIT"
+    },
+    "node_modules/@use-gesture/react": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/@use-gesture/react/-/react-10.3.1.tgz",
+      "integrity": "sha512-Yy19y6O2GJq8f7CHf7L0nxL8bf4PZCPaVOCgJrusOeFHY1LvHgYXnmnXg6N5iwAnbgbZCDjo60SiM6IPJi9C5g==",
+      "license": "MIT",
+      "dependencies": {
+        "@use-gesture/core": "10.3.1"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0"
+      }
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-6.0.1.tgz",
         "node": "18 || 20 || >=22"
       }
     },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/baseline-browser-mapping": {
       "version": "2.10.21",
       "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.21.tgz",
         "node": ">=6.0.0"
       }
     },
+    "node_modules/bidi-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
+      "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==",
+      "license": "MIT",
+      "dependencies": {
+        "require-from-string": "^2.0.2"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "5.0.5",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.5.tgz",
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/buffer": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
+    },
     "node_modules/camelize": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/camera-controls": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/camera-controls/-/camera-controls-3.1.0.tgz",
+      "integrity": "sha512-w5oULNpijgTRH0ARFJJ0R5ct1nUM3R3WP7/b8A6j9uTGpRfnsypc/RBMPQV8JQDPayUe37p/TZZY1PcUr4czOQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.11.0",
+        "npm": ">=10.8.2"
+      },
+      "peerDependencies": {
+        "three": ">=0.126.1"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001790",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001790.tgz",
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cross-env": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
+      "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
+      "license": "MIT",
+      "dependencies": {
+        "cross-spawn": "^7.0.1"
+      },
+      "bin": {
+        "cross-env": "src/bin/cross-env.js",
+        "cross-env-shell": "src/bin/cross-env-shell.js"
+      },
+      "engines": {
+        "node": ">=10.14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
       "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
       "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/detect-gpu": {
+      "version": "5.0.70",
+      "resolved": "https://registry.npmjs.org/detect-gpu/-/detect-gpu-5.0.70.tgz",
+      "integrity": "sha512-bqerEP1Ese6nt3rFkwPnGbsUF9a4q+gMmpTVVOEzoCyeCc+y7/RvJnQZJx1JwhgQI5Ntg0Kgat8Uu7XpBqnz1w==",
+      "license": "MIT",
+      "dependencies": {
+        "webgl-constants": "^1.1.1"
+      }
+    },
     "node_modules/detect-libc": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
         "node": ">=8"
       }
     },
+    "node_modules/draco3d": {
+      "version": "1.5.7",
+      "resolved": "https://registry.npmjs.org/draco3d/-/draco3d-1.5.7.tgz",
+      "integrity": "sha512-m6WCKt/erDXcw+70IJXnG7M3awwQPAsZvJGX5zY7beBqpELw6RDGkYVU0W43AFxye4pDZ5i2Lbyc/NNGqwjUVQ==",
+      "license": "Apache-2.0"
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.344",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.344.tgz",
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
       "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12.0.0"
         }
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "license": "MIT"
+    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.38.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.38.0.tgz",
+      "integrity": "sha512-rFYkY/pigbcswl1XQSb7q424kSTQ8q6eAC+YUsSKooHQYuLdzdHjrt6uxUC+PRAO++q5IS7+TamgIw1AphxR+g==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.38.0",
+        "motion-utils": "^12.36.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/glsl-noise": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/glsl-noise/-/glsl-noise-0.0.0.tgz",
+      "integrity": "sha512-b/ZCF6amfAUb7dJM/MxRs7AetQEahYzJ8PtgfrmEdtw6uyGOr+ZSGtgjFm6mfsBkxJ4d2W7kg+Nlqzqvn3Bc0w==",
+      "license": "MIT"
+    },
     "node_modules/graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
         "hermes-estree": "0.25.1"
       }
     },
+    "node_modules/hls.js": {
+      "version": "1.6.16",
+      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.6.16.tgz",
+      "integrity": "sha512-VSIRpLfRwlAAdGL4wiTucx2ScRipo0ed1FBatWkyt832jC4CReKstga6yIhYVwGu9LOBjuX9wzmRMeQdBJtzEA==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
         "node": ">= 4"
       }
     },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "license": "MIT"
+    },
     "node_modules/imurmurhash": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-promise": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
+      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==",
+      "license": "MIT"
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "license": "ISC"
     },
+    "node_modules/its-fine": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/its-fine/-/its-fine-2.0.0.tgz",
+      "integrity": "sha512-KLViCmWx94zOvpLwSlsx6yOCeMhZYaxrJV87Po5k/FoZzcPSahvK5qJ7fYhS61sZi5ikmh2S3Hz55A2l3U69ng==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react-reconciler": "^0.28.9"
+      },
+      "peerDependencies": {
+        "react": "^19.0.0"
+      }
+    },
     "node_modules/jiti": {
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
     "node_modules/lightningcss": {
       "version": "1.32.0",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/maath": {
+      "version": "0.10.8",
+      "resolved": "https://registry.npmjs.org/maath/-/maath-0.10.8.tgz",
+      "integrity": "sha512-tRvbDF0Pgqz+9XUa4jjfgAQ8/aPKmQdWXilFu2tMy4GWj4NOsx99HlULO4IeREfbO3a0sA145DZYyvXPkybm0g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/three": ">=0.134.0",
+        "three": ">=0.134.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
+    "node_modules/meshline": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/meshline/-/meshline-3.3.1.tgz",
+      "integrity": "sha512-/TQj+JdZkeSUOl5Mk2J7eLcYTLiQm2IDzmlSvYm7ov15anEcDJ92GHqqazxTSreeNgfnYu24kiEvvv0WlbCdFQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "three": ">=0.137"
+      }
+    },
+    "node_modules/meshoptimizer": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-1.1.1.tgz",
+      "integrity": "sha512-oRFNWJRDA/WTrVj7NWvqa5HqE1t9MYDj2VaWirQCzCCrAd2GHrqR/sQezCxiWATPNlKTcRaPRHPJwIRoPBAp5g==",
+      "license": "MIT"
+    },
     "node_modules/minimatch": {
       "version": "10.2.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "12.38.0",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.38.0.tgz",
+      "integrity": "sha512-pdkHLD8QYRp8VfiNLb8xIBJis1byQ9gPT3Jnh2jqfFtAsWUA3dEepDlsWe/xMpO8McV+VdpKVcp+E+TGJEtOoA==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.36.0"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.36.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.36.0.tgz",
+      "integrity": "sha512-eHWisygbiwVvf6PZ1vhaHCLamvkSbPIeAYxWUuL3a2PD/TROgE7FvfHWTIH4vMl798QLfMw15nRqIaRDXTlYRg==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
       "license": "MIT",
       "engines": {
         "node": ">=8"
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "license": "MIT"
     },
+    "node_modules/potpack": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz",
+      "integrity": "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==",
+      "license": "ISC"
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/promise-worker-transferable": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/promise-worker-transferable/-/promise-worker-transferable-1.0.4.tgz",
+      "integrity": "sha512-bN+0ehEnrXfxV2ZQvU2PetO0n4gqBD4ulq3MI1WOPLgr7/Mg9yRQkX5+0v1vagr74ZTsl7XtzlaYDo2EuCeYJw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "is-promise": "^2.1.0",
+        "lie": "^3.0.2"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
         "react": "^19.2.5"
       }
     },
+    "node_modules/react-use-measure": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.7.tgz",
+      "integrity": "sha512-KrvcAo13I/60HpwGO5jpW7E9DfusKyLPLvuHlUyP5zqnmAPhNc6qTRjUQrdTADl0lpPpDVU2/Gg51UlOGHXbdg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.13",
+        "react-dom": ">=16.13"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/rolldown": {
       "version": "1.0.0-rc.17",
       "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.0.0-rc.17.tgz",
       "integrity": "sha512-ZrT53oAKrtA4+YtBWPQbtPOxIbVDbxT0orcYERKd63VJTF13zPcgXTvD4843L8pcsI7M6MErt8QtON6lrB9tyA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@oxc-project/types": "=0.127.0",
       "version": "1.0.0-rc.17",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.17.tgz",
       "integrity": "sha512-n8iosDOt6Ig1UhJ2AYqoIhHWh/isz0xpicHTzpKBeotdVsTEcxsSA/i3EVM7gQAj0rU27OLAxCjzlj15IWY7bg==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/scheduler": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
       "license": "MIT",
       "dependencies": {
         "shebang-regex": "^3.0.0"
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
       "license": "MIT",
       "engines": {
         "node": ">=8"
         "node": ">=0.10.0"
       }
     },
+    "node_modules/stats-gl": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/stats-gl/-/stats-gl-2.4.2.tgz",
+      "integrity": "sha512-g5O9B0hm9CvnM36+v7SFl39T7hmAlv541tU81ME8YeSb3i1CIP5/QdDeSB3A0la0bKNHpxpwxOVRo2wFTYEosQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/three": "*",
+        "three": "^0.170.0"
+      },
+      "peerDependencies": {
+        "@types/three": "*",
+        "three": "*"
+      }
+    },
+    "node_modules/stats-gl/node_modules/three": {
+      "version": "0.170.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.170.0.tgz",
+      "integrity": "sha512-FQK+LEpYc0fBD+J8g6oSEyyNzjp+Q7Ks1C568WWaoMRLW+TkNNWmenWeGgJjV105Gd+p/2ql1ZcjYvNiPZBhuQ==",
+      "license": "MIT"
+    },
+    "node_modules/stats.js": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/stats.js/-/stats.js-0.17.0.tgz",
+      "integrity": "sha512-hNKz8phvYLPEcRkeG1rsGmV5ChMjKDAWU7/OJJdDErPBNChQXxCo3WZurGpnWc6gZhAzEPFad1aVgyOANH1sMw==",
+      "license": "MIT"
+    },
     "node_modules/styled-components": {
       "version": "6.4.1",
       "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.4.1.tgz",
       "integrity": "sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==",
       "license": "MIT"
     },
+    "node_modules/suspend-react": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/suspend-react/-/suspend-react-0.1.3.tgz",
+      "integrity": "sha512-aqldKgX9aZqpoDp3e8/BZ8Dm7x1pJl+qI3ZKxDN0i/IQTWUwBx/ManmlVJ3wowqbno6c2bmiIfs+Um6LbsjJyQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=17.0"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.4.tgz",
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/three": {
+      "version": "0.184.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.184.0.tgz",
+      "integrity": "sha512-wtTRjG92pM5eUg/KuUnHsqSAlPM296brTOcLgMRqEeylYTh/CdtvKUvCyyCQTzFuStieWxvZb8mVTMvdPyUpxg==",
+      "license": "MIT"
+    },
+    "node_modules/three-mesh-bvh": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/three-mesh-bvh/-/three-mesh-bvh-0.8.3.tgz",
+      "integrity": "sha512-4G5lBaF+g2auKX3P0yqx+MJC6oVt6sB5k+CchS6Ob0qvH0YIhuUk1eYr7ktsIpY+albCqE80/FVQGV190PmiAg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "three": ">= 0.159.0"
+      }
+    },
+    "node_modules/three-stdlib": {
+      "version": "2.36.1",
+      "resolved": "https://registry.npmjs.org/three-stdlib/-/three-stdlib-2.36.1.tgz",
+      "integrity": "sha512-XyGQrFmNQ5O/IoKm556ftwKsBg11TIb301MB5dWNicziQBEs2g3gtOYIf7pFiLa0zI2gUwhtCjv9fmjnxKZ1Cg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/draco3d": "^1.4.0",
+        "@types/offscreencanvas": "^2019.6.4",
+        "@types/webxr": "^0.5.2",
+        "draco3d": "^1.4.1",
+        "fflate": "^0.6.9",
+        "potpack": "^1.0.1"
+      },
+      "peerDependencies": {
+        "three": ">=0.128.0"
+      }
+    },
+    "node_modules/three-stdlib/node_modules/fflate": {
+      "version": "0.6.10",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.6.10.tgz",
+      "integrity": "sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==",
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.16",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.16.tgz",
       "integrity": "sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "fdir": "^6.5.0",
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
+    "node_modules/troika-three-text": {
+      "version": "0.52.4",
+      "resolved": "https://registry.npmjs.org/troika-three-text/-/troika-three-text-0.52.4.tgz",
+      "integrity": "sha512-V50EwcYGruV5rUZ9F4aNsrytGdKcXKALjEtQXIOBfhVoZU9VAqZNIoGQ3TMiooVqFAbR1w15T+f+8gkzoFzawg==",
+      "license": "MIT",
+      "dependencies": {
+        "bidi-js": "^1.0.2",
+        "troika-three-utils": "^0.52.4",
+        "troika-worker-utils": "^0.52.0",
+        "webgl-sdf-generator": "1.1.1"
+      },
+      "peerDependencies": {
+        "three": ">=0.125.0"
+      }
+    },
+    "node_modules/troika-three-utils": {
+      "version": "0.52.4",
+      "resolved": "https://registry.npmjs.org/troika-three-utils/-/troika-three-utils-0.52.4.tgz",
+      "integrity": "sha512-NORAStSVa/BDiG52Mfudk4j1FG4jC4ILutB3foPnfGbOeIs9+G5vZLa0pnmnaftZUGm4UwSoqEpWdqvC7zms3A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "three": ">=0.125.0"
+      }
+    },
+    "node_modules/troika-worker-utils": {
+      "version": "0.52.0",
+      "resolved": "https://registry.npmjs.org/troika-worker-utils/-/troika-worker-utils-0.52.0.tgz",
+      "integrity": "sha512-W1CpvTHykaPH5brv5VHLfQo9D1OYuo0cSBEUQFFT/nBUzM8iD6Lq2/tgG/f1OelbAS1WtaTPQzE5uM49egnngw==",
+      "license": "MIT"
+    },
     "node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/tunnel-rat": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/tunnel-rat/-/tunnel-rat-0.1.2.tgz",
+      "integrity": "sha512-lR5VHmkPhzdhrM092lI2nACsLO4QubF0/yoOhzX7c+wIpbN1GjHNzCc91QlpxBi+cnx8vVJ+Ur6vL5cEoQPFpQ==",
+      "license": "MIT",
+      "dependencies": {
+        "zustand": "^4.3.2"
+      }
+    },
+    "node_modules/tunnel-rat/node_modules/zustand": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
+      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.2"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
     },
     "node_modules/type-check": {
       "version": "0.4.0",
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/utility-types": {
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.11.0.tgz",
+      "integrity": "sha512-6Z7Ma2aVEWisaL6TvBCy7P8rm2LQoPv6dJ7ecIaIixHcwfbJ0x7mWdbcwlIM5IGQxPZSFYeqRCqlOOeKoJYMkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
     "node_modules/vite": {
       "version": "8.0.10",
       "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.10.tgz",
       "integrity": "sha512-rZuUu9j6J5uotLDs+cAA4O5H4K1SfPliUlQwqa6YEwSrWDZzP4rhm00oJR5snMewjxF5V/K3D4kctsUTsIU9Mw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "lightningcss": "^1.32.0",
         }
       }
     },
+    "node_modules/webgl-constants": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/webgl-constants/-/webgl-constants-1.1.1.tgz",
+      "integrity": "sha512-LkBXKjU5r9vAW7Gcu3T5u+5cvSvh5WwINdr0C+9jpzVB41cjQAP5ePArDtk/WHYdVj0GefCgM73BA7FlIiNtdg=="
+    },
+    "node_modules/webgl-sdf-generator": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/webgl-sdf-generator/-/webgl-sdf-generator-1.1.1.tgz",
+      "integrity": "sha512-9Z0JcMTFxeE+b2x1LJTdnaT8rT8aEp7MVxkNwoycNmJWwPdzoXzMh0BjJSh/AEFP+KPYZUli814h8bJZFIZ2jA==",
+      "license": "MIT"
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
       "license": "ISC",
       "dependencies": {
         "isexe": "^2.0.0"
       "peerDependencies": {
         "zod": "^3.25.0 || ^4.0.0"
       }
+    },
+    "node_modules/zustand": {
+      "version": "5.0.12",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.12.tgz",
+      "integrity": "sha512-i77ae3aZq4dhMlRhJVCYgMLKuSiZAaUPAct2AksxQ+gOtimhGMdXljRT21P5BNpeT4kXlLIckvkPM029OljD7g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
     }
   }
 }

frontend/package.json CHANGED Viewed

@@ -10,13 +10,18 @@
     "preview": "vite preview"
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.2.4",
     "autoprefixer": "^10.5.0",
     "postcss": "^8.5.10",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
     "styled-components": "^6.4.1",
-    "tailwindcss": "^4.2.4"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",

     "preview": "vite preview"
   },
   "dependencies": {
+    "@react-three/drei": "^10.7.7",
+    "@react-three/fiber": "^9.6.0",
     "@tailwindcss/vite": "^4.2.4",
     "autoprefixer": "^10.5.0",
+    "framer-motion": "^12.38.0",
     "postcss": "^8.5.10",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
     "styled-components": "^6.4.1",
+    "tailwindcss": "^4.2.4",
+    "three": "^0.184.0",
+    "zustand": "^5.0.12"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",

frontend/src/App.tsx ADDED Viewed

	@@ -0,0 +1,183 @@

+import { useEffect, Suspense, lazy } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { useStore } from './store'
+import { checkHealth } from './api'
+import UploadZone from './components/UploadZone'
+import ResultPanel from './components/ResultPanel'
+// Lazy-load the heavy 3D component
+const DeepfakeOrb = lazy(() => import('./components/DeepfakeOrb'))
+export default function App() {
+  const { state, result, error, reset } = useStore()
+  const verdict = result?.result ?? null
+  // Health check on mount
+  useEffect(() => {
+    const badge = document.getElementById('modelBadge')
+    checkHealth()
+      .then((d) => {
+        if (badge) {
+          badge.textContent = d.model.toUpperCase()
+          badge.style.color = '#00ff88bb'
+          badge.style.borderColor = '#00ff8844'
+        }
+      })
+      .catch(() => {
+        if (badge) {
+          badge.textContent = 'SERVER OFFLINE'
+          badge.style.color = '#ff3355bb'
+          badge.style.borderColor = '#ff335544'
+        }
+      })
+  }, [])
+  const showUpload = state === 'idle' || state === 'loading'
+  const showResult = state === 'result'
+  const showError  = state === 'error'
+  return (
+    <div className="min-h-screen text-white overflow-x-hidden" style={{ background: '#050508' }}>
+      {/* ── Sticky header ── */}
+      <header className="sticky top-0 z-50 border-b border-white/5"
+        style={{ background: 'rgba(5,5,8,0.85)', backdropFilter: 'blur(20px)' }}>
+        <div className="max-w-5xl mx-auto px-6 h-16 flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <motion.div
+              className="w-9 h-9 rounded-lg border border-[#00ff8855] flex items-center justify-center"
+              animate={{ boxShadow: ['0 0 8px #00ff8820', '0 0 20px #00ff8840', '0 0 8px #00ff8820'] }}
+              transition={{ duration: 2.5, repeat: Infinity }}
+            >
+              <svg width="18" height="18" fill="none" stroke="#00ff88" strokeWidth="1.5" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.964-7.178z"/>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+              </svg>
+            </motion.div>
+            <div>
+              <p className="text-sm font-bold tracking-widest" style={{ color: '#00ff88', textShadow: '0 0 12px #00ff8855' }}>
+                DEEPFAKE AUTHENTICATOR
+              </p>
+              <p className="text-[9px] tracking-widest text-white/30 font-mono">AI-POWERED VIDEO FORENSICS</p>
+            </div>
+          </div>
+          <div
+            id="modelBadge"
+            className="text-[10px] px-3 py-1.5 rounded-full border font-mono tracking-wider transition-all duration-500"
+            style={{ borderColor: 'rgba(255,255,255,0.1)', color: 'rgba(255,255,255,0.3)' }}
+          >
+            CONNECTING...
+          </div>
+        </div>
+      </header>
+      {/* ── Main layout ── */}
+      <main className="max-w-5xl mx-auto px-6 py-10">
+        <div className="flex flex-col lg:flex-row gap-10 items-start">
+          {/* ── Left: 3D orb + hero ── */}
+          <div className="w-full lg:w-80 flex-shrink-0 flex flex-col items-center gap-6 lg:sticky lg:top-24">
+            {/* 3D Orb */}
+            <div className="w-64 h-64 relative">
+              <Suspense fallback={
+                <div className="w-full h-full rounded-full border border-[#00ff8830] flex items-center justify-center">
+                  <div className="w-16 h-16 rounded-full border-2 border-[#00ff88] border-t-transparent animate-spin" />
+                </div>
+              }>
+                <DeepfakeOrb state={state} verdict={verdict} />
+              </Suspense>
+            </div>
+            {/* Hero text */}
+            <AnimatePresence mode="wait">
+              {showUpload && (
+                <motion.div
+                  key="hero"
+                  className="text-center"
+                  initial={{ opacity: 0, y: 10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -10 }}
+                >
+                  <h1 className="text-2xl font-bold mb-2 leading-tight"
+                    style={{ background: 'linear-gradient(135deg, #fff 30%, #00ff88)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>
+                    Is This Video Real?
+                  </h1>
+                  <p className="text-white/40 text-xs leading-relaxed max-w-xs">
+                    Dual ViT ensemble + Wav2Vec2 audio analysis detects facial manipulation and AI-generated voices.
+                  </p>
+                  {/* Stat pills */}
+                  <div className="flex flex-wrap gap-2 justify-center mt-4">
+                    {['2 ViT Models', '40 Frames', 'Audio AI', '< 20s'].map((s) => (
+                      <span key={s} className="text-[10px] px-2.5 py-1 rounded-full border border-white/8 text-white/40 bg-white/3">
+                        {s}
+                      </span>
+                    ))}
+                  </div>
+                </motion.div>
+              )}
+              {showResult && verdict && (
+                <motion.div
+                  key="verdict-summary"
+                  className="text-center"
+                  initial={{ opacity: 0, scale: 0.9 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  exit={{ opacity: 0 }}
+                >
+                  <p className="text-3xl font-bold tracking-widest mb-1"
+                    style={{ color: verdict === 'FAKE' ? '#ff3355' : '#00ff88', textShadow: `0 0 20px ${verdict === 'FAKE' ? '#ff335566' : '#00ff8866'}` }}>
+                    {verdict === 'FAKE' ? 'DEEPFAKE' : 'AUTHENTIC'}
+                  </p>
+                  <p className="text-white/30 text-xs font-mono">{result?.confidence}% confidence</p>
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </div>
+          {/* ── Right: Upload / Result / Error ── */}
+          <div className="flex-1 min-w-0">
+            <AnimatePresence mode="wait">
+              {showUpload && (
+                <motion.div key="upload" initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: -20 }}>
+                  <UploadZone />
+                </motion.div>
+              )}
+              {showResult && (
+                <motion.div key="result" initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: -20 }}>
+                  <ResultPanel />
+                </motion.div>
+              )}
+              {showError && (
+                <motion.div
+                  key="error"
+                  className="rounded-2xl border border-red-500/20 bg-red-500/5 p-6"
+                  initial={{ opacity: 0, scale: 0.95 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  exit={{ opacity: 0 }}
+                >
+                  <div className="flex items-center gap-3 mb-3">
+                    <span className="text-xl">⚠️</span>
+                    <span className="text-red-400 font-bold text-sm tracking-wider uppercase">Analysis Failed</span>
+                  </div>
+                  <p className="text-white/50 text-sm leading-relaxed">{error}</p>
+                  <button
+                    onClick={reset}
+                    className="mt-4 text-xs text-white/30 hover:text-white transition-colors font-mono tracking-wider"
+                  >
+                    ↻ Try again
+                  </button>
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </div>
+        </div>
+      </main>
+      <footer className="text-center py-8 text-[10px] text-white/15 font-mono tracking-widest border-t border-white/3">
+        DEEPFAKE AUTHENTICATOR · MEDIAPIPE + VIT ENSEMBLE + WAV2VEC2 · LOCAL INFERENCE
+      </footer>
+    </div>
+  )
+}

frontend/src/api.ts ADDED Viewed

	@@ -0,0 +1,20 @@

+import type { AnalysisResult } from './store'
+const BASE = import.meta.env.DEV ? 'http://localhost:8000' : window.location.origin
+export async function analyzeVideo(file: File): Promise<AnalysisResult> {
+  const fd = new FormData()
+  fd.append('file', file)
+  const res = await fetch(`${BASE}/analyze`, { method: 'POST', body: fd })
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({}))
+    throw new Error((err as any).detail || `Server error ${res.status}`)
+  }
+  return res.json()
+}
+export async function checkHealth(): Promise<{ status: string; model: string; ready: boolean }> {
+  const res = await fetch(`${BASE}/health`)
+  if (!res.ok) throw new Error('Server offline')
+  return res.json()
+}

frontend/src/components/DeepfakeOrb.tsx ADDED Viewed

	@@ -0,0 +1,103 @@

+import { useRef, useMemo } from 'react'
+import { Canvas, useFrame } from '@react-three/fiber'
+import { Sphere, MeshDistortMaterial, Float, Stars } from '@react-three/drei'
+import * as THREE from 'three'
+import type { AppState, Verdict } from '../store'
+// ── Inner animated orb ────────────────────────────────────────────────────────
+function Orb({ state, verdict }: { state: AppState; verdict: Verdict }) {
+  const meshRef = useRef<THREE.Mesh>(null)
+  const ringRef = useRef<THREE.Mesh>(null)
+  const ring2Ref = useRef<THREE.Mesh>(null)
+  const isFake = verdict === 'FAKE'
+  const isReal = verdict === 'REAL'
+  const isLoading = state === 'loading'
+  const color = isFake ? '#ff3355' : isReal ? '#00ff88' : '#00aaff'
+  const emissive = isFake ? '#ff0033' : isReal ? '#00cc66' : '#0066ff'
+  useFrame((_, delta) => {
+    if (!meshRef.current) return
+    meshRef.current.rotation.y += delta * (isLoading ? 1.5 : 0.4)
+    meshRef.current.rotation.x += delta * (isLoading ? 0.8 : 0.15)
+    if (ringRef.current) ringRef.current.rotation.z += delta * 0.6
+    if (ring2Ref.current) ring2Ref.current.rotation.x += delta * 0.4
+  })
+  // Particle ring
+  const particles = useMemo(() => {
+    const count = 120
+    const positions = new Float32Array(count * 3)
+    for (let i = 0; i < count; i++) {
+      const angle = (i / count) * Math.PI * 2
+      const radius = 1.8 + Math.random() * 0.4
+      positions[i * 3]     = Math.cos(angle) * radius
+      positions[i * 3 + 1] = (Math.random() - 0.5) * 0.3
+      positions[i * 3 + 2] = Math.sin(angle) * radius
+    }
+    return positions
+  }, [])
+  return (
+    <group>
+      {/* Stars background */}
+      <Stars radius={8} depth={4} count={300} factor={1} fade speed={isLoading ? 3 : 0.5} />
+      {/* Main orb */}
+      <Float speed={isLoading ? 4 : 1.5} rotationIntensity={isLoading ? 1 : 0.3} floatIntensity={isLoading ? 1.5 : 0.5}>
+        <Sphere ref={meshRef} args={[1, 64, 64]}>
+          <MeshDistortMaterial
+            color={color}
+            emissive={emissive}
+            emissiveIntensity={isLoading ? 0.8 : 0.4}
+            distort={isLoading ? 0.6 : isFake ? 0.45 : 0.25}
+            speed={isLoading ? 4 : 2}
+            roughness={0.1}
+            metalness={0.8}
+            transparent
+            opacity={0.9}
+          />
+        </Sphere>
+      </Float>
+      {/* Orbit ring 1 */}
+      <mesh ref={ringRef} rotation={[Math.PI / 2, 0, 0]}>
+        <torusGeometry args={[1.6, 0.015, 8, 100]} />
+        <meshBasicMaterial color={color} transparent opacity={0.5} />
+      </mesh>
+      {/* Orbit ring 2 */}
+      <mesh ref={ring2Ref} rotation={[Math.PI / 3, Math.PI / 4, 0]}>
+        <torusGeometry args={[1.9, 0.008, 8, 100]} />
+        <meshBasicMaterial color={color} transparent opacity={0.25} />
+      </mesh>
+      {/* Particle ring */}
+      <points>
+        <bufferGeometry>
+          <bufferAttribute attach="attributes-position" args={[particles, 3]} />
+        </bufferGeometry>
+        <pointsMaterial color={color} size={0.025} transparent opacity={0.6} />
+      </points>
+      {/* Ambient + point lights */}
+      <ambientLight intensity={0.2} />
+      <pointLight position={[3, 3, 3]} intensity={2} color={color} />
+      <pointLight position={[-3, -3, -3]} intensity={1} color={emissive} />
+    </group>
+  )
+}
+// ── Exported canvas wrapper ───────────────────────────────────────────────────
+export default function DeepfakeOrb({ state, verdict }: { state: AppState; verdict: Verdict }) {
+  return (
+    <Canvas
+      camera={{ position: [0, 0, 4], fov: 50 }}
+      style={{ width: '100%', height: '100%' }}
+      gl={{ antialias: true, alpha: true }}
+    >
+      <Orb state={state} verdict={verdict} />
+    </Canvas>
+  )
+}

frontend/src/components/ResultPanel.tsx ADDED Viewed

	@@ -0,0 +1,346 @@

+import { motion, AnimatePresence } from 'framer-motion'
+import { useStore } from '../store'
+import type { FramePoint, AudioResult } from '../store'
+// ── Animated confidence arc ───────────────────────────────────────────────────
+function ConfidenceArc({ pct, isFake }: { pct: number; isFake: boolean }) {
+  const r = 54
+  const circ = 2 * Math.PI * r
+  const half = circ / 2
+  const fill = (pct / 100) * half
+  const color = isFake ? '#ff3355' : '#00ff88'
+  return (
+    <div className="relative w-40 h-20 mx-auto">
+      <svg width="160" height="80" viewBox="0 0 160 80">
+        {/* Track */}
+        <path
+          d={`M 16 80 A ${r} ${r} 0 0 1 144 80`}
+          fill="none" stroke="rgba(255,255,255,0.06)" strokeWidth="10" strokeLinecap="round"
+        />
+        {/* Fill */}
+        <motion.path
+          d={`M 16 80 A ${r} ${r} 0 0 1 144 80`}
+          fill="none"
+          stroke={color}
+          strokeWidth="10"
+          strokeLinecap="round"
+          strokeDasharray={`${half} ${half}`}
+          initial={{ strokeDashoffset: half }}
+          animate={{ strokeDashoffset: half - fill }}
+          transition={{ duration: 1.4, ease: [0.22, 1, 0.36, 1] }}
+          style={{ filter: `drop-shadow(0 0 8px ${color})` }}
+        />
+      </svg>
+      <div className="absolute inset-0 flex flex-col items-center justify-end pb-1">
+        <motion.span
+          className="text-2xl font-bold font-mono"
+          style={{ color }}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.5 }}
+        >
+          {pct}%
+        </motion.span>
+      </div>
+    </div>
+  )
+}
+// ── Frame timeline ────────────────────────────────────────────────────────────
+function Timeline({ frames, isFake }: { frames: FramePoint[]; isFake: boolean }) {
+  if (!frames.length) return (
+    <p className="text-white/30 text-xs font-mono text-center py-4">No per-frame data</p>
+  )
+  const color = isFake ? '#ff3355' : '#00ff88'
+  const maxH = 60
+  return (
+    <div className="flex items-end gap-1 overflow-x-auto pb-1" style={{ height: maxH + 24 + 'px', position: 'relative' }}>
+      {/* 60% threshold line */}
+      <div
+        className="absolute left-0 right-0 pointer-events-none"
+        style={{ bottom: 24 + maxH * 0.6, height: 1, background: 'rgba(255,170,0,0.35)' }}
+      >
+        <span className="absolute right-0 -top-4 text-[9px] text-yellow-400/60 font-mono">60%</span>
+      </div>
+      {frames.map((pt, i) => {
+        const h = Math.max(3, (pt.fake_pct / 100) * maxH)
+        const hot = pt.fake_pct >= 60
+        return (
+          <div key={i} className="group relative flex-shrink-0" style={{ width: 10, height: maxH }}>
+            {/* Tooltip */}
+            <div className="absolute bottom-full mb-1 left-1/2 -translate-x-1/2 bg-[#0a0a14] border border-white/10 rounded px-1.5 py-0.5 text-[9px] font-mono whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity z-10 pointer-events-none">
+              F{pt.frame}: {pt.fake_pct}%
+            </div>
+            <motion.div
+              className="absolute bottom-0 w-full rounded-t"
+              style={{
+                background: hot
+                  ? `linear-gradient(to top, ${color}, rgba(255,255,255,0.3))`
+                  : 'rgba(255,255,255,0.1)',
+                boxShadow: hot ? `0 0 6px ${color}66` : 'none',
+              }}
+              initial={{ height: 0 }}
+              animate={{ height: h }}
+              transition={{ duration: 0.6, delay: i * 0.02, ease: [0.22, 1, 0.36, 1] }}
+            />
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+// ── Audio card ────────────────────────────────────────────────────────────────
+function AudioCard({ audio }: { audio: AudioResult }) {
+  if (!audio?.available) return null
+  const isAI = audio.result === 'AI_VOICE'
+  const color = isAI ? '#ff3355' : '#00ff88'
+  const colorDim = isAI ? 'rgba(255,51,85,0.12)' : 'rgba(0,255,136,0.12)'
+  return (
+    <motion.div
+      className="rounded-2xl border p-5"
+      style={{ borderColor: `${color}33`, background: colorDim }}
+      initial={{ opacity: 0, y: 16 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay: 0.4 }}
+    >
+      <div className="flex items-center gap-3 mb-4">
+        <div className="w-1 h-5 rounded-full" style={{ background: '#00aaff', boxShadow: '0 0 8px #00aaff' }} />
+        <span className="text-[10px] font-bold tracking-widest text-[#00aaff] uppercase">Voice Authenticity</span>
+      </div>
+      <div className="flex items-center gap-3 mb-4">
+        <span
+          className="px-3 py-1.5 rounded-full text-xs font-bold tracking-wider border"
+          style={{ color, borderColor: `${color}55`, background: `${color}12` }}
+        >
+          {isAI ? '🤖 AI VOICE DETECTED' : '🎙️ HUMAN VOICE'}
+        </span>
+        <span className="text-2xl font-bold font-mono ml-auto" style={{ color }}>
+          {audio.confidence}%
+        </span>
+      </div>
+      {/* Bar */}
+      <div className="h-2 rounded-full bg-white/5 overflow-hidden mb-4">
+        <motion.div
+          className="h-full rounded-full"
+          style={{
+            background: isAI ? 'linear-gradient(90deg,#880022,#ff3355)' : 'linear-gradient(90deg,#00aaff,#00ff88)',
+            boxShadow: `0 0 10px ${color}66`,
+          }}
+          initial={{ width: 0 }}
+          animate={{ width: `${audio.confidence}%` }}
+          transition={{ duration: 1.2, ease: [0.22, 1, 0.36, 1] }}
+        />
+      </div>
+      {/* Scores */}
+      <div className="grid grid-cols-2 gap-3 mb-4">
+        {[
+          { label: 'Wav2Vec2 Model', val: `${audio.model_score}%` },
+          { label: 'Signal Heuristics', val: `${audio.heuristic_score}%` },
+        ].map(({ label, val }) => (
+          <div key={label} className="rounded-xl bg-white/3 border border-white/5 p-3 text-center">
+            <p className="text-[10px] text-white/40 tracking-wider mb-1">{label}</p>
+            <p className="text-lg font-bold font-mono text-white">{val}</p>
+          </div>
+        ))}
+      </div>
+      {/* Details */}
+      <div className="space-y-2">
+        {audio.details.map((d, i) => (
+          <motion.div
+            key={i}
+            className="flex items-start gap-2.5 text-xs text-white/60 bg-white/2 rounded-lg px-3 py-2 border-l-2"
+            style={{ borderLeftColor: color }}
+            initial={{ opacity: 0, x: -8 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ delay: 0.5 + i * 0.07 }}
+          >
+            <span className="w-1.5 h-1.5 rounded-full flex-shrink-0 mt-1" style={{ background: color, boxShadow: `0 0 6px ${color}` }} />
+            {d}
+          </motion.div>
+        ))}
+      </div>
+      {/* Features */}
+      {audio.features && Object.keys(audio.features).length > 0 && (
+        <div className="mt-4 pt-4 border-t border-white/5">
+          <p className="text-[10px] text-white/30 tracking-widest uppercase mb-2">Signal Features</p>
+          <div className="grid grid-cols-2 gap-2">
+            {Object.entries(audio.features).map(([k, v]) => (
+              <div key={k} className="flex justify-between text-[10px]">
+                <span className="text-white/30 capitalize">{k.replace(/_/g, ' ')}</span>
+                <span className="text-white/70 font-mono">{typeof v === 'number' ? v.toFixed(3) : v}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </motion.div>
+  )
+}
+// ── Main result panel ─────────────────────────────────────────────────────────
+export default function ResultPanel() {
+  const { result, reset } = useStore()
+  if (!result) return null
+  const isFake = result.result === 'FAKE'
+  const color = isFake ? '#ff3355' : '#00ff88'
+  const colorDim = isFake ? 'rgba(255,51,85,0.08)' : 'rgba(0,255,136,0.08)'
+  return (
+    <AnimatePresence>
+      <motion.div
+        className="w-full max-w-2xl mx-auto space-y-4"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+      >
+        {/* Verdict card */}
+        <motion.div
+          className="rounded-2xl border-2 p-6"
+          style={{ borderColor: `${color}55`, background: colorDim, boxShadow: `0 0 50px ${color}15` }}
+          initial={{ scale: 0.95, opacity: 0 }}
+          animate={{ scale: 1, opacity: 1 }}
+          transition={{ type: 'spring', stiffness: 200, damping: 20 }}
+        >
+          <div className="flex flex-wrap items-center gap-6">
+            {/* Badge */}
+            <div className="text-center flex-shrink-0">
+              <motion.div
+                className="w-24 h-24 rounded-full border-2 flex items-center justify-center mx-auto mb-3 text-4xl"
+                style={{ borderColor: color, boxShadow: `0 0 30px ${color}44`, background: `${color}10` }}
+                animate={{ boxShadow: [`0 0 20px ${color}30`, `0 0 50px ${color}60`, `0 0 20px ${color}30`] }}
+                transition={{ duration: 2, repeat: Infinity }}
+              >
+                {isFake ? '⚠️' : '✅'}
+              </motion.div>
+              <motion.p
+                className="text-2xl font-bold tracking-widest"
+                style={{ color, textShadow: `0 0 20px ${color}66` }}
+                animate={isFake ? { textShadow: [`0 0 10px ${color}44`, `0 0 25px ${color}88`, `0 0 10px ${color}44`] } : {}}
+                transition={{ duration: 2.5, repeat: Infinity }}
+              >
+                {isFake ? 'DEEPFAKE' : 'AUTHENTIC'}
+              </motion.p>
+              <p className="text-[10px] text-white/30 tracking-widest mt-1">VERDICT</p>
+            </div>
+            {/* Confidence */}
+            <div className="flex-1 min-w-[200px]">
+              <p className="text-[10px] text-white/40 tracking-widest uppercase mb-3">Confidence Score</p>
+              <ConfidenceArc pct={result.confidence} isFake={isFake} />
+              {/* Risk pill */}
+              <div className="mt-4 flex items-center justify-between bg-white/3 rounded-xl px-4 py-3 border border-white/5">
+                <span className="text-[10px] text-white/40 tracking-wider uppercase">Risk Level</span>
+                <span
+                  className="text-xs font-bold tracking-wider px-3 py-1 rounded-full border"
+                  style={{
+                    color: result.confidence < 35 ? '#00ff88' : result.confidence < 65 ? '#ffaa00' : '#ff3355',
+                    borderColor: result.confidence < 35 ? '#00ff8844' : result.confidence < 65 ? '#ffaa0044' : '#ff335544',
+                    background: result.confidence < 35 ? '#00ff8810' : result.confidence < 65 ? '#ffaa0010' : '#ff335510',
+                  }}
+                >
+                  {result.confidence < 35 ? 'LOW' : result.confidence < 65 ? 'MEDIUM' : result.confidence < 80 ? 'HIGH' : 'CRITICAL'}
+                </span>
+              </div>
+            </div>
+          </div>
+        </motion.div>
+        {/* Insights + Meta */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {/* Insights */}
+          <div className="rounded-2xl border border-white/6 bg-white/2 p-5">
+            <div className="flex items-center gap-2 mb-4">
+              <div className="w-0.5 h-4 rounded-full bg-[#00aaff] shadow-[0_0_8px_#00aaff]" />
+              <span className="text-[10px] font-bold tracking-widest text-[#00aaff] uppercase">Analysis Insights</span>
+            </div>
+            <div className="space-y-2">
+              {result.details.map((d, i) => (
+                <motion.div
+                  key={i}
+                  className="flex items-start gap-2.5 text-xs text-white/60 bg-white/2 rounded-lg px-3 py-2.5 border-l-2"
+                  style={{ borderLeftColor: color }}
+                  initial={{ opacity: 0, x: -10 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  transition={{ delay: 0.1 + i * 0.07 }}
+                >
+                  <span className="w-1.5 h-1.5 rounded-full flex-shrink-0 mt-1" style={{ background: color }} />
+                  {d}
+                </motion.div>
+              ))}
+            </div>
+          </div>
+          {/* Metadata */}
+          <div className="rounded-2xl border border-white/6 bg-white/2 p-5">
+            <div className="flex items-center gap-2 mb-4">
+              <div className="w-0.5 h-4 rounded-full bg-[#00aaff] shadow-[0_0_8px_#00aaff]" />
+              <span className="text-[10px] font-bold tracking-widest text-[#00aaff] uppercase">Video Metadata</span>
+            </div>
+            <div className="space-y-2.5">
+              {[
+                ['Frames Analyzed', result.metadata.frames_analyzed],
+                ['Faces Detected', result.metadata.frames_with_faces],
+                ['Duration', `${result.metadata.video_duration_sec}s`],
+                ['FPS', result.metadata.video_fps],
+                ['Resolution', result.metadata.resolution],
+                ['Processing Time', `${result.processing_time_sec}s`],
+              ].map(([k, v]) => (
+                <div key={String(k)} className="flex justify-between items-center border-b border-white/4 pb-2 last:border-0 last:pb-0">
+                  <span className="text-[11px] text-white/40">{k}</span>
+                  <span className="text-[12px] font-bold font-mono text-white">{v ?? '—'}</span>
+                </div>
+              ))}
+            </div>
+            <div className="mt-4 pt-3 border-t border-white/5 flex items-center gap-2">
+              <div className="w-1.5 h-1.5 rounded-full bg-[#00ff88] shadow-[0_0_6px_#00ff88]" />
+              <span className="text-[10px] text-white/30 font-mono tracking-wider">ViT Ensemble · 2 Models</span>
+            </div>
+          </div>
+        </div>
+        {/* Frame Timeline */}
+        <div className="rounded-2xl border border-white/6 bg-white/2 p-5">
+          <div className="flex items-center gap-2 mb-4">
+            <div className="w-0.5 h-4 rounded-full bg-[#00aaff] shadow-[0_0_8px_#00aaff]" />
+            <span className="text-[10px] font-bold tracking-widest text-[#00aaff] uppercase">Frame Analysis Timeline</span>
+            <span className="text-[10px] text-white/20 font-mono ml-1">— {result.frame_timeline.length} frames</span>
+          </div>
+          <Timeline frames={result.frame_timeline} isFake={isFake} />
+          <div className="flex justify-between mt-2">
+            <span className="text-[10px] text-white/20 font-mono">Frame 0</span>
+            <span className="text-[10px] text-white/20 font-mono">Frame {result.frame_timeline.length}</span>
+          </div>
+        </div>
+        {/* Audio */}
+        {result.audio && <AudioCard audio={result.audio} />}
+        {/* Reset */}
+        <div className="text-center pt-2">
+          <motion.button
+            onClick={reset}
+            className="px-6 py-2.5 text-xs font-bold tracking-widest uppercase text-white/40 border border-white/10 rounded-xl hover:text-[#00ff88] hover:border-[#00ff8840] hover:bg-[#00ff8808] transition-all duration-200"
+            whileHover={{ scale: 1.02 }}
+            whileTap={{ scale: 0.98 }}
+          >
+            ↻ &nbsp;Analyze Another Video
+          </motion.button>
+        </div>
+      </motion.div>
+    </AnimatePresence>
+  )
+}

frontend/src/components/UploadZone.tsx ADDED Viewed

	@@ -0,0 +1,190 @@

+import { useRef, useState } from 'react'
+import { motion } from 'framer-motion'
+import { useStore } from '../store'
+import { analyzeVideo } from '../api'
+const AGENTS = [
+  { icon: '🎬', label: 'Frame Extractor',  sub: 'Sampling keyframes' },
+  { icon: '👤', label: 'Face Detector',    sub: 'Isolating regions' },
+  { icon: '🧠', label: 'ViT Ensemble',     sub: 'Neural inference' },
+  { icon: '📊', label: 'Report Builder',   sub: 'Compiling results' },
+]
+function fmtBytes(b: number) {
+  if (b < 1024) return `${b} B`
+  if (b < 1048576) return `${(b / 1024).toFixed(1)} KB`
+  return `${(b / 1048576).toFixed(1)} MB`
+}
+export default function UploadZone() {
+  const { file, state, setFile, setState, setResult, setError, setAgentStep, reset } = useStore()
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [dragging, setDragging] = useState(false)
+  const isLoading = state === 'loading'
+  function applyFile(f: File) {
+    if (f.type.startsWith('video/')) setFile(f)
+    else setError('Please select a valid video file (MP4, AVI, MOV, MKV, WebM).')
+  }
+  async function handleAnalyze() {
+    if (!file) return
+    setState('loading')
+    setAgentStep(0)
+    // Simulate agent steps
+    const delays = [0, 1800, 4200, 7500]
+    delays.forEach((d, i) => setTimeout(() => setAgentStep(i), d))
+    try {
+      const result = await analyzeVideo(file)
+      setResult(result)
+    } catch (e: any) {
+      setError(e.message || 'Analysis failed')
+    }
+  }
+  return (
+    <div className="w-full max-w-xl mx-auto flex flex-col gap-5">
+      {/* Drop zone */}
+      <motion.div
+        className={`relative rounded-2xl border-2 border-dashed cursor-pointer transition-all duration-300 overflow-hidden
+          ${dragging ? 'border-[#00ff88] bg-[#00ff8808] shadow-[0_0_40px_#00ff8820]' : 'border-[#00ff8830] hover:border-[#00ff8866] hover:bg-[#00ff8806]'}
+          ${file ? 'py-6 px-8' : 'py-12 px-8'}`}
+        onClick={() => !file && inputRef.current?.click()}
+        onDragOver={(e) => { e.preventDefault(); setDragging(true) }}
+        onDragLeave={() => setDragging(false)}
+        onDrop={(e) => {
+          e.preventDefault(); setDragging(false)
+          const f = e.dataTransfer.files[0]
+          if (f) applyFile(f)
+        }}
+        whileHover={{ scale: file ? 1 : 1.01 }}
+        whileTap={{ scale: 0.99 }}
+      >
+        <input
+          ref={inputRef}
+          type="file"
+          accept="video/*"
+          className="hidden"
+          onChange={(e) => e.target.files?.[0] && applyFile(e.target.files[0])}
+        />
+        {!file ? (
+          <motion.div className="text-center" initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
+            {/* Orbit upload icon */}
+            <div className="relative w-20 h-20 mx-auto mb-5">
+              <motion.div
+                className="absolute inset-0 rounded-full border border-dashed border-[#00ff8840]"
+                animate={{ rotate: 360 }}
+                transition={{ duration: 8, repeat: Infinity, ease: 'linear' }}
+              />
+              <motion.div
+                className="absolute inset-3 rounded-full border border-[#00ff8820]"
+                animate={{ rotate: -360 }}
+                transition={{ duration: 5, repeat: Infinity, ease: 'linear' }}
+              />
+              <div className="absolute inset-0 flex items-center justify-center">
+                <svg width="28" height="28" fill="none" stroke="#00ff8899" strokeWidth="1.5" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"/>
+                </svg>
+              </div>
+            </div>
+            <p className="text-white/80 font-semibold text-base mb-1">Drop video for forensic analysis</p>
+            <p className="text-white/40 text-sm">Drag & drop or click to browse</p>
+            <p className="text-white/20 text-xs mt-3 font-mono">MP4 · AVI · MOV · MKV · WebM — Max 100MB</p>
+          </motion.div>
+        ) : (
+          <motion.div
+            className="flex items-center gap-4"
+            initial={{ opacity: 0, y: 8 }}
+            animate={{ opacity: 1, y: 0 }}
+          >
+            <div className="w-12 h-12 rounded-xl bg-[#00ff8812] border border-[#00ff8830] flex items-center justify-center flex-shrink-0 shadow-[0_0_20px_#00ff8820]">
+              <svg width="22" height="22" fill="none" stroke="#00ff88" strokeWidth="1.5" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z"/>
+              </svg>
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="text-white font-semibold text-sm truncate">{file.name}</p>
+              <p className="text-white/40 text-xs mt-0.5 font-mono">{fmtBytes(file.size)}</p>
+            </div>
+            <button
+              onClick={(e) => { e.stopPropagation(); reset() }}
+              className="p-2 text-white/30 hover:text-red-400 transition-colors rounded-lg hover:bg-red-400/10"
+            >
+              <svg width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12"/>
+              </svg>
+            </button>
+          </motion.div>
+        )}
+      </motion.div>
+      {/* Analyze button */}
+      <motion.button
+        disabled={!file || isLoading}
+        onClick={handleAnalyze}
+        className={`w-full py-4 rounded-xl font-bold text-sm tracking-widest uppercase transition-all duration-300 relative overflow-hidden
+          ${file && !isLoading
+            ? 'bg-gradient-to-r from-[#00ff88] to-[#00cc66] text-[#050508] shadow-[0_0_30px_#00ff8840] cursor-pointer'
+            : 'bg-white/5 text-white/20 cursor-not-allowed border border-white/10'}`}
+        whileHover={file && !isLoading ? { scale: 1.02, boxShadow: '0 0 50px #00ff8860' } : {}}
+        whileTap={file && !isLoading ? { scale: 0.98 } : {}}
+      >
+        {/* Shimmer */}
+        {file && !isLoading && (
+          <motion.div
+            className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent skew-x-12"
+            animate={{ x: ['-100%', '200%'] }}
+            transition={{ duration: 2.5, repeat: Infinity, ease: 'linear' }}
+          />
+        )}
+        <span className="relative z-10">
+          {isLoading ? '⏳ Analyzing...' : '▶  Analyze Video'}
+        </span>
+      </motion.button>
+      {/* Agent pipeline (loading state) */}
+      {isLoading && <AgentPipeline />}
+    </div>
+  )
+}
+function AgentPipeline() {
+  const agentStep = useStore((s) => s.agentStep)
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 12 }}
+      animate={{ opacity: 1, y: 0 }}
+      className="grid grid-cols-2 gap-3"
+    >
+      {AGENTS.map((agent, i) => {
+        const active = i <= agentStep
+        const current = i === agentStep
+        return (
+          <motion.div
+            key={i}
+            className={`rounded-xl p-3 border transition-all duration-500 flex items-center gap-3
+              ${active
+                ? 'border-[#00ff8844] bg-[#00ff8808] shadow-[0_0_15px_#00ff8815]'
+                : 'border-white/5 bg-white/2'}`}
+            animate={current ? { scale: [1, 1.02, 1] } : {}}
+            transition={{ duration: 0.6, repeat: current ? Infinity : 0 }}
+          >
+            <div className={`w-2 h-2 rounded-full flex-shrink-0 transition-all duration-500
+              ${active ? 'bg-[#00ff88] shadow-[0_0_8px_#00ff88]' : 'bg-white/15'}`} />
+            <div>
+              <p className="text-xs font-semibold text-white/80">{agent.label}</p>
+              <p className={`text-[10px] font-mono transition-colors duration-300 ${active ? 'text-[#00ff88]' : 'text-white/30'}`}>
+                {active ? (current ? agent.sub : 'Done ✓') : 'Waiting...'}
+              </p>
+            </div>
+          </motion.div>
+        )
+      })}
+    </motion.div>
+  )
+}

frontend/src/index.css CHANGED Viewed

@@ -1,57 +1,43 @@
 @import "tailwindcss";
-:root {
-  --primary: #00ff9c;
-  --primary-dim: #00cc7d;
-  --secondary: #00e5ff; /* soft cyan */
-  --red: #ff4444;
-  --red-dim: #cc2222;
-  --bg-dark: #040906;
-  --bg-gradient: radial-gradient(circle at top center, #001a11 0%, #040906 100%);
-  --card-bg: rgba(10, 20, 15, 0.6);
-  --card-bg-inner: rgba(15, 25, 20, 0.8);
-  --border: rgba(0, 255, 156, 0.15);
-  --border-hover: rgba(0, 255, 156, 0.4);
-  --text: #e2e8f0;
-  --muted: #849ca3;
-}
 body {
-  background: var(--bg-dark);
-  background-image: var(--bg-gradient);
-  font-family: 'Inter', sans-serif;
-  color: var(--text);
-  min-height: 100vh;
-  overflow-x: hidden;
-  letter-spacing: 0.02em;
 }
-/* ── Scrollbar ── */
-::-webkit-scrollbar { width: 6px; height: 6px; }
-::-webkit-scrollbar-track { background: var(--bg-dark); }
-::-webkit-scrollbar-thumb { background: rgba(0, 255, 156, 0.3); border-radius: 6px; }
-/* ── Scanner Background ── */
-.scanner {
-  position: fixed; inset: 0; pointer-events: none; z-index: 100;
-  background: linear-gradient(to bottom,
-    transparent 0%, transparent 49.9%,
-    rgba(0, 255, 156, 0.05) 50%, transparent 50.1%);
-  background-size: 100% 4px;
-  animation: scanMove 8s linear infinite;
-}
-@keyframes scanMove {
-  0%   { background-position: 0 0; }
-  100% { background-position: 0 100vh; }
 }
-.text-glow {
-  color: var(--primary);
-  text-shadow: 0 0 10px rgba(0, 255, 156, 0.6);
 }
-.fade-up { animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
-@keyframes fadeUp {
-  from { opacity: 0; transform: translateY(20px); }
-  to   { opacity: 1; transform: none; }
-}

 @import "tailwindcss";
+* { box-sizing: border-box; margin: 0; padding: 0; }
 body {
+  background: #050508;
+  color: #e2e8f0;
+  font-family: 'Space Grotesk', 'Inter', sans-serif;
+  -webkit-font-smoothing: antialiased;
 }
+::-webkit-scrollbar { width: 4px; height: 4px; }
+::-webkit-scrollbar-track { background: #050508; }
+::-webkit-scrollbar-thumb { background: rgba(0,255,136,0.2); border-radius: 4px; }
+/* Animated grid background */
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background-image:
+    linear-gradient(rgba(0,255,136,0.025) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(0,255,136,0.025) 1px, transparent 1px);
+  background-size: 60px 60px;
 }
+/* Radial glow at top */
+body::after {
+  content: '';
+  position: fixed;
+  top: -200px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 800px;
+  height: 600px;
+  background: radial-gradient(ellipse, rgba(0,255,136,0.06) 0%, transparent 70%);
+  pointer-events: none;
+  z-index: 0;
 }
+main, header, footer { position: relative; z-index: 1; }

frontend/src/main.tsx ADDED Viewed

	@@ -0,0 +1,10 @@

+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

frontend/src/store.ts ADDED Viewed

	@@ -0,0 +1,59 @@

+import { create } from 'zustand'
+export type AppState = 'idle' | 'loading' | 'result' | 'error'
+export type Verdict = 'FAKE' | 'REAL' | null
+export interface FramePoint { frame: number; fake_pct: number }
+export interface AudioResult {
+  available: boolean
+  result: string
+  confidence: number
+  fake_probability: number
+  model_score: number
+  heuristic_score: number
+  details: string[]
+  features: Record<string, number>
+}
+export interface AnalysisResult {
+  result: 'FAKE' | 'REAL'
+  confidence: number
+  details: string[]
+  frame_timeline: FramePoint[]
+  metadata: {
+    frames_analyzed: number
+    frames_with_faces: number
+    video_duration_sec: number
+    video_fps: number
+    resolution: string
+  }
+  processing_time_sec: number
+  audio: AudioResult
+}
+interface Store {
+  state: AppState
+  file: File | null
+  result: AnalysisResult | null
+  error: string | null
+  agentStep: number
+  setState: (s: AppState) => void
+  setFile: (f: File | null) => void
+  setResult: (r: AnalysisResult) => void
+  setError: (e: string) => void
+  setAgentStep: (n: number) => void
+  reset: () => void
+}
+export const useStore = create<Store>((set) => ({
+  state: 'idle',
+  file: null,
+  result: null,
+  error: null,
+  agentStep: -1,
+  setState: (state) => set({ state }),
+  setFile: (file) => set({ file }),
+  setResult: (result) => set({ result, state: 'result' }),
+  setError: (error) => set({ error, state: 'error' }),
+  setAgentStep: (agentStep) => set({ agentStep }),
+  reset: () => set({ state: 'idle', file: null, result: null, error: null, agentStep: -1 }),
+}))

frontend/vite.config.js CHANGED Viewed

@@ -2,7 +2,17 @@ import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'
-// https://vite.dev/config/
 export default defineConfig({
   plugins: [react(), tailwindcss()],
 })

 import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'
 export default defineConfig({
   plugins: [react(), tailwindcss()],
+  server: {
+    port: 5173,
+    proxy: {
+      '/analyze': 'http://localhost:8000',
+      '/health':  'http://localhost:8000',
+    },
+  },
+  build: {
+    outDir: '../frontend-dist',
+    emptyOutDir: true,
+  },
 })