feat(v2.1): Complete UI overhaul, Spatial Hashing engine and Documentation sync

Author: SpaceEngineerSS

CHANGELOG.md

@@ -5,6 +5,44 @@ All notable changes to OrbitView will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+---
+
+## [2.1.0] - 2025-12-29
+
+### Added
+- **Scientific HUD:** Completely redesigned Glassmorphism interface
+  - `GlassPanel` - Base container with backdrop blur and neon effects
+  - `MissionControl` - Top HUD bar with live/paused status indicator
+  - `TelemetryDeck` - Bottom panel showing real-time satellite telemetry
+  - Neon glow effects and scan-line animations
+- **Time Machine:** YouTube-style draggable timeline (`TimeScrubber`)
+  - Zustand-powered state management (`timelineStore.ts`)
+  - Speed multiplier controls (0.1× to 3600×)
+  - Bidirectional sync with Cesium Clock (100ms throttle)
+- **Physics Core:** Spatial Hashing engine for 25k+ satellite performance
+  - 1000km³ grid cell structure in `satellite.worker.ts`
+  - O(N²) → O(N×k) complexity reduction for link calculation
+- **Camera:** Velocity-vector locked "Satellite POV" mode
+  - Quaternion-based orientation with Gram-Schmidt orthogonalization
+  - Prograde direction following with radial "up" vector
+- **Export:** Full data export functionality in InfoPanel
+  - TLE format (`.tle`)
+  - CSV telemetry export
+  - JSON full data export
+
+### Changed
+- **State Management:** Migrated from React Context to Zustand for timeline control
+- **UI Borders:** Thinner `border-white/5` for modern glassmorphism
+- **Backdrop Blur:** Upgraded to `backdrop-blur-2xl`
+- **Shadows:** Added colored shadows (`shadow-cyan-500/5`)
+
+### Fixed
+- **SSR Hydration:** Added `mounted` state pattern to fix clock mismatch
+- **Mobile UX:** Safe area insets (`env(safe-area-inset-bottom)`) for iPhone
+- **Bottom Sheet:** Improved handle bar styling
+
+---
+
 ## [1.0.0] - 2024-12-19
 
 ### Added

README.md

@@ -25,6 +25,16 @@
 
 ## ✨ Features
 
+### 🎨 v2.0 UI Revolution
+- 🖥️ **Cinematic HUD & Glassmorphism UI** - Sci-Fi inspired interface with backdrop blur, neon accents, and scan-line effects
+- ⏱️ **Time Scrubber & Replay System** - YouTube-style draggable timeline with Zustand-powered state
+- 🎥 **Satellite Cockpit View (POV)** - Velocity-vector locked camera with Quaternion orientation
+
+### ⚡ v2.0 Performance
+- 🧮 **Spatial Hashing Collision Engine** - O(N) link calculation with 1000km³ grid cells
+- 📊 **Scientific Data Export** - TLE, CSV, and JSON format export for research
+
+### 🌍 Core Features
 - 🌍 **Interactive 3D Globe** - Real-time visualization of 25,000+ satellites and space objects
 - 🔬 **Scientific Analysis** - Doppler shift, orbital decay, conjunction analysis, pass prediction
 - 🛰️ **Professional TLE Hub** - Multi-source fallback (Space-Track, CelesTrak, AMSAT)
@@ -66,6 +76,8 @@ Open [http://localhost:3000](http://localhost:3000) to see the app.
 | [Next.js 16](https://nextjs.org/) | React framework with App Router |
 | [CesiumJS](https://cesium.com/) + [Resium](https://resium.reearth.io/) | 3D globe visualization |
 | [satellite.js](https://github.com/shashwatak/satellite-js) | SGP4/SDP4 orbital propagation |
+| [Zustand](https://zustand-demo.pmnd.rs/) | High-performance state management |
+| [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) | Spatial Hashing physics engine |
 | [TailwindCSS](https://tailwindcss.com/) | Utility-first CSS |
 | [Framer Motion](https://www.framer.com/motion/) | Animations |
 | [Lucide React](https://lucide.dev/) | Icons |
@@ -205,5 +217,5 @@ You can test the latest stable version of OrbitView here:
 ---
 
 <div align="center">
-  Made with ❤️ for space enthusiasts | Last updated: 2025-12-20
+  Made with ❤️ for space enthusiasts | v2.1.0 | Last updated: 2025-12-29
 </div>

package-lock.json

@@ -43,7 +43,8 @@
     "resium": "^1.19.1",
     "satellite.js": "^6.0.1",
     "sonner": "^2.0.7",
-    "tailwind-merge": "^3.4.0"
+    "tailwind-merge": "^3.4.0",
+    "zustand": "^5.0.9"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
@@ -63,4 +64,4 @@
     "ts-jest": "^29.4.6",
     "typescript": "^5"
   }
-}
+}

package.json

@@ -1,28 +1,121 @@
 @import "tailwindcss";
 
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  --background: #020617;
+  --foreground: #ededed;
+  
+  /* HUD Color Palette */
+  --hud-cyan: #06b6d4;
+  --hud-cyan-glow: rgba(6, 182, 212, 0.4);
+  --hud-rose: #f43f5e;
+  --hud-rose-glow: rgba(244, 63, 94, 0.4);
+  --hud-emerald: #10b981;
+  --hud-purple: #a855f7;
+  --hud-bg: #020617;
+  --hud-panel: rgba(15, 23, 42, 0.6);
+  
+  /* Font Variables */
+  --font-heading: var(--font-rajdhani), 'Rajdhani', sans-serif;
+  --font-data: var(--font-jetbrains), 'JetBrains Mono', monospace;
 }
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  --font-sans: var(--font-rajdhani);
+  --font-mono: var(--font-jetbrains);
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --background: #0a0a0a;
+    --background: #020617;
     --foreground: #ededed;
   }
 }
 
 body {
-  background: var(--background);
+  background: var(--hud-bg);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-heading);
+}
+
+/* HUD Typography */
+.font-heading {
+  font-family: var(--font-heading);
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.font-data {
+  font-family: var(--font-data);
+  font-weight: 400;
+  letter-spacing: 0.02em;
+}
+
+/* Neon Glow Effects */
+.neon-glow-cyan {
+  box-shadow: 0 0 20px var(--hud-cyan-glow), 0 0 40px rgba(6, 182, 212, 0.2);
+}
+
+.neon-glow-rose {
+  box-shadow: 0 0 20px var(--hud-rose-glow), 0 0 40px rgba(244, 63, 94, 0.2);
+}
+
+.neon-text-cyan {
+  color: var(--hud-cyan);
+  text-shadow: 0 0 10px var(--hud-cyan-glow), 0 0 20px var(--hud-cyan-glow);
+}
+
+.neon-text-rose {
+  color: var(--hud-rose);
+  text-shadow: 0 0 10px var(--hud-rose-glow), 0 0 20px var(--hud-rose-glow);
+}
+
+/* Scan Line Animation */
+@keyframes scan-line {
+  0% {
+    transform: translateY(-100%);
+  }
+  100% {
+    transform: translateY(100%);
+  }
+}
+
+.animate-scan-line {
+  animation: scan-line 3s linear infinite;
+}
+
+/* Pulse Glow Animation */
+@keyframes neon-pulse {
+  0%, 100% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+  50% {
+    opacity: 0.8;
+    filter: brightness(1.2);
+  }
+}
+
+.animate-neon-pulse {
+  animation: neon-pulse 2s ease-in-out infinite;
+}
+
+/* Live Indicator Pulse */
+@keyframes live-pulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.2);
+    opacity: 0.7;
+  }
+}
+
+.animate-live-pulse {
+  animation: live-pulse 1.5s ease-in-out infinite;
 }
 
 /* Custom Scrollbar */

src/app/globals.css

@@ -1,17 +1,19 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Rajdhani, JetBrains_Mono } from "next/font/google";
 import { LocaleProvider } from "@/hooks/useLocale";
 import { ServiceWorkerRegistration } from "@/components/ServiceWorkerRegistration";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
+const rajdhani = Rajdhani({
+  variable: "--font-rajdhani",
   subsets: ["latin"],
+  weight: ["500", "600", "700"],
 });
 
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
+const jetbrainsMono = JetBrains_Mono({
+  variable: "--font-jetbrains",
   subsets: ["latin"],
+  weight: ["400", "500"],
 });
 
 export const metadata: Metadata = {
@@ -95,7 +97,7 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${rajdhani.variable} ${jetbrainsMono.variable} antialiased bg-slate-950`}
       >
         <LocaleProvider>
           <ServiceWorkerRegistration />