🌌 Synapse UI

Synapse UI is a premium, AI-adaptive workspace designed to seamlessly mold around your workflow. It features a highly modular, interactive dashboard where widgets can be dynamically added, removed, resized, and configured using LLM intelligence or real-time manual interaction.

With stunning WebGL-powered 3D backgrounds, smooth physics-based interactive elements, and a responsive theme system, Synapse UI offers an unparalleled visual and functional experience.

---

✨ Key Features

• 🤖 AI-Driven Workspace Workspace Generation & Layouts: Utilizes state-of-the-art LLMs (via Groq/Gemini APIs) to parse natural language prompts, instantly generating tailor-made dashboard layouts, populating widgets with realistic domain-specific data, and structuring files/checklists relevant to your task.
• 🚀 Ultra-Premium WebGL Backgrounds:
  • Hyperspeed Landing: Interactive, high-performance 3D star-road lines, fully responsive to system theme switching (Dark & Light modes). Includes customized mountain distortions, post-processing effects, and mouse interaction.
  • Lightfall Canvas: A beautiful, customizable canvas particle waterfall effect for dashboards and secondary pages.
• 📦 Dynamic, Zero-Placeholder Widgets: A comprehensive suite of widgets that ingest actual structured data generated dynamically by the AI Engine:
  • Coding Tracker: Visualizes live coding metrics, lines written, languages, and goals.
  • Kanban Board: Dynamic drag-and-drop task boards customized for your projects.
  • Research Engine: Curated paper tracks, reading checklists, and progress notes.
  • Deploy Checklist: Crucial QA gates, lint configurations, and deploy progress indicators.
  • Analytics Engine: Interactive charts and metrics representing business goals.
  • Plus: Calendar, Notes, GitHub Activity, Resume Progress, and Study Timer.
• 🗑️ 3D Interactive Cyberpunk Bin: Built with React Three Fiber (R3F) & Three.js, featuring floating digital particles and physics-based animations. Dragging widget cards over the bin triggers lid animations, dropping them plays a slam and bounce sequence, and deleted widgets can be restored from the bin dropdown.
• 🎨 Reactive Theme Switching: A fully optimized, dynamic Dark and Light mode UI. Visual components, backgrounds (including WebGL shaders), border variables, and text elements instantly morph colors based on your preferred workspace state.

---

🛠️ Technology Stack

Synapse UI is built on a modern, high-performance, and visually stunning web architecture:

• Framework: Next.js 15 (App Router & React 19)
• State Management: Zustand (Persistent Workspace/Bin state)
• 3D Graphics & Physics: Three.js, React Three Fiber, and OGL
• Styling & Theme: Vanilla CSS Variables & Tailwind CSS
• Animations: Framer Motion
• Database & Auth: Supabase (PostgreSQL Database, Auth, Realtime)
• AI Processing: Groq API & Google Gemini

---

🚀 Getting Started

📋 Prerequisites

Ensure you have the following installed:

• Node.js (v18.x or later)
• npm or yarn

🛠️ Installation

1. Clone the Repository:

   git clone https://github.com/your-username/SynapseUI.git
   cd SynapseUI

2. Install Dependencies:

   npm install

3. Configure Environment Variables: Create a .env.local file in the root directory. You can use the following structure:

   # Supabase Credentials
   NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
   NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
   SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key
   
   # AI Engines API Keys
   GROQ_API_KEY=your_groq_api_key
   GEMINI_API_KEY=your_gemini_api_key
   
   # App Configuration
   NEXT_PUBLIC_APP_URL=http://localhost:3000

4. Run the Development Server:

   npm run dev

5. Open the Application: Navigate to http://localhost:3000 on your local browser.

---

📂 Project Architecture

SynapseUI/
├── app/                  # Next.js Pages, Routes, and API Handlers
├── components/           # UI Components
│   ├── backgrounds/      # WebGL & Canvas animated backgrounds
│   ├── dashboard/        # Command Bar, Widget grid, Workspace views
│   ├── landing/          # Interactive Landing page components
│   ├── three/            # 3D R3F Bin, Particle scenes
│   └── widgets/          # Highly modular React widgets
├── config/               # Widget registry & system configurations
├── lib/                  # AI engine prompts, Supabase server/client SDKs
├── store/                # Zustand global states (workspace, theme, bin)
└── public/               # Static assets & 3D models

---

📜 License

This project is licensed under the MIT License. See the LICENSE file for details.