Kinetic Dash is a high-fidelity, interactive system dashboard that blends physics-based UI, real-time hardware monitoring, and sensory-driven design.
It demonstrates advanced frontend engineering with a strong focus on tactile UX and motion realism.
🌐 Live Demo: Click here
📦 GitHub Repository: Click here
Kinetic Dash is built using a Sensory Hub architecture, where every component reacts to user input through motion, depth, and light.
The dashboard simulates a futuristic operating system interface with:
- Physics-driven 3D interactions
- Aurora-style cursor glows
- Real-time system and external data feeds
This project is designed to showcase production-grade frontend skills, not just UI aesthetics.
- 3D tilt cards with depth-aware motion
- Built using
useMotionValueanduseSpring - Natural inertia and damping for tactile feedback
- Live battery status via the Web Battery API
- Real-time system clock synchronization
- Dynamic activity feed using the GitHub Events API
- Periodic polling with smooth UI updates
- Interactive breach simulation
- Real-time typewriter logs with terminal aesthetics
- Keyboard-first navigation (
Ctrl + K) - Instant module switching for power users
| Category | Technology |
|---|---|
| Framework | Next.js 15 (App Router) |
| Language | TypeScript |
| Styling | Tailwind CSS (v4) |
| Animation | Framer Motion (Physics-based) |
| Icons | Lucide React |
- State Management: React Hooks (
useState,useEffect) - Data Handling: Client-side polling for hardware & APIs
- Design Language: Glassmorphism, Aurora UI, radial gradients
- Routing: Next.js client-side navigation (App Router)
git clone https://github.com/Jaanvichouhan34/kinetic-dash.git
cd kinetic-dash###2️⃣ Install dependencies
npm install###3️⃣ Run the development server
npm run devDeveloped by Jaanvi Chouhan