A cutting-edge immersive web application for visualizing and interacting with synthetic cognitive intelligence systems. Built with advanced 3D graphics, real-time agent debates, and interactive chat capabilities, LUMEN vX.2 provides an unprecedented interface for exploring artificial consciousness concepts.
LUMEN vX.2 is a comprehensive demonstration of advanced synthetic consciousness visualization, featuring:
- Interactive Agent Chat: Engage in real-time conversations with multiple cognitive agents
- Live 3D Debate Arena: Watch agents actively debate with visual speech indicators and argument displays
- Immersive User Experience: Full-screen mobile-first design with landing page and loading sequences
- Advanced AI Interface: Multi-agent reasoning simulation with ethical framework integration
This application showcases the future of human-AI interaction through an intuitive, visually stunning interface that makes complex AI concepts accessible and engaging.
- Multi-Agent Conversations: Chat with specialized cognitive agents (Logician, Ethicist, Rebel, Strategist)
- Real-time Debates: Agents respond to your queries and debate among themselves
- Visual Agent Status: Live indicators showing agent thinking states and activity levels
- Immersive Interface: Beautiful chat UI with agent avatars and typing indicators
- Neural Glyph Arena: Interactive 3D visualization with live agent debates and speech animations
- ERPS Timeline: Real-time event logging and introspective process monitoring
- System Monitor: Comprehensive Σ-Matrix stability and performance metrics
- Interactive Chat Interface: Immersive chat system for real-time agent conversations
- Interactive Override Console: Ethical parameter adjustment and intervention capabilities
- Multi-Agent Visualization: Dynamic representation of Expert Neural Specialist Agents (ENSAs) and counterfactual personas
- Landing Page: Professional entry point with system overview and CTA
- Loading Animation: Engaging transition sequence with progress indicators
- Mobile-First Design: Optimized for smartphones, tablets, and desktop devices
- Real-time Animations: Live debate visualization with speaking indicators and argument text
- Multi-Screen Flow: Complete application journey from landing to dashboard
- Neural-Inspired Theme: Custom color palette with consciousness spectrum gradients
- Semantic Tokens: Ethical state indicators (compliant/warning/violation/processing)
- Responsive Design: Optimized for desktop, tablet, and mobile devices
- Accessibility: WCAG 2.1 compliant with keyboard navigation and screen reader support
- Dark Mode: Futuristic interface optimized for extended use
- Real-time 3D Rendering: Hardware-accelerated WebGL visualizations
- Smooth Animations: 60fps transitions using Framer Motion
- Interactive Controls: Mouse/touch controls for 3D navigation
- Data Visualization: Dynamic charts and progress indicators
- Modular Architecture: Component-based design for extensibility
- React 18.3.1 - Modern component-based architecture
- TypeScript - Type-safe development environment
- Vite - Lightning-fast build tooling and development server
- @react-three/fiber 8.18 - React renderer for Three.js
- @react-three/drei 9.122 - Helper components for 3D scenes
- Three.js 0.158 - WebGL 3D graphics library
- Framer Motion 10.16 - Production-ready motion library
- Tailwind CSS - Utility-first CSS framework
- shadcn/ui - Customizable component library
- Radix UI - Accessible primitive components
- Lucide React - Beautiful icon library
- TanStack Query 5.56 - Powerful data synchronization
- React Router DOM 6.26 - Declarative routing
- React Hook Form 7.53 - Performant form management
- Node.js 18+ - Download from nodejs.org
- npm 9+ - Comes with Node.js
-
Clone the repository
git clone <repository-url> cd lumen-interface
-
Install dependencies
npm install
-
Start development server
npm run dev
-
Open your browser Navigate to
http://localhost:8080
# Create optimized production build
npm run build
# Preview production build locally
npm run preview- Professional Introduction: LUMEN system overview and capabilities
- Call-to-Action: Smooth entry point to the main interface
- Branding Integration: Or4cl3 AI Solutions powered-by messaging
- Responsive Design: Optimized for all device types
- Animated Transitions: Engaging loading screen with progress indicators
- System Initialization: Simulated startup sequence for immersion
- Smooth Progression: Automatic advancement to dashboard
- Multi-Agent Chat: Conversation system with specialized AI agents
- Real-time Responses: Agents respond to queries and debate among themselves
- Visual Status Indicators: Live agent activity and thinking states
- Message History: Persistent conversation log with timestamps
- Agent Specializations: Logician, Ethicist, Rebel, and Strategist personas
- System Status: Real-time operational metrics and uptime tracking
- Architecture Overview: Component status indicators and health monitoring
- Quick Actions: Navigation shortcuts to key interface features
- Performance Metrics: Live system health and ethical alignment monitoring
- Live Agent Debates: 3D nodes with real-time speech animation and argument display
- Interactive Controls: Full 3D navigation with orbit, pan, and zoom
- Visual Argument Flow: Connection lines showing debate relationships and strengths
- Speaking Indicators: Visual cues when agents are actively contributing to debates
- Real-time HUD: Live debate status and recent argument summaries
- Event Logging: Chronological display of system events
- Filtering System: Type-based event categorization
- Detailed Inspection: Expandable event details with traceability
- Search Functionality: Quick event lookup and navigation
- Σ-Matrix Metrics: Core stability and coherence indicators
- Performance Tracking: Learning rates and memory utilization monitoring
- Alert System: Real-time notification of system anomalies and status changes
- Historical Data: Trend analysis and pattern recognition dashboards
- Ethical Weight Adjustment: Dynamic parameter modification
- Context Injection: Emotional and argumentative input capabilities
- Action Approval: Pending decision review and control
- Authentication System: Multi-factor security for critical operations
- Neural Colors: Deep void (#0a0612) to surface (#2d2438)
- Consciousness Spectrum: Purple (#c084fc), Cyan (#0ea5e9), Magenta (#e879f9), Emerald (#10b981)
- Ethical States: Compliant (green), Warning (amber), Violation (red), Processing (purple)
- Primary Font: System default with fallbacks
- Monospace: For technical data and metrics
- Font Weights: Light (300) to Bold (700)
- Transition Timing: Custom cubic-bezier curves for natural motion
- Hover Effects: Subtle state changes with visual feedback
- Loading States: Smooth skeleton screens and progress indicators
src/
├── components/ # Reusable UI components
│ ├── ui/ # shadcn/ui component library
│ ├── AppShell.tsx # Main application state management
│ ├── LandingPage.tsx # Entry point with CTA
│ ├── LoadingScreen.tsx # Animated loading experience
│ ├── LumenInterface.tsx # Main dashboard with tabs
│ ├── InteractiveChat.tsx # Multi-agent chat system
│ ├── NeuralGlyphArena.tsx # Enhanced 3D debate visualization
│ ├── ErpsTimeline.tsx
│ ├── SystemMonitor.tsx
│ └── InteractiveOverrides.tsx
├── pages/ # Route components
├── hooks/ # Custom React hooks
├── lib/ # Utility functions
├── assets/ # Images and static resources
└── index.css # Global styles and design tokens
- tailwind.config.ts - Tailwind CSS configuration with custom design tokens
- vite.config.ts - Vite build configuration
- tsconfig.json - TypeScript compiler configuration
- components.json - shadcn/ui component configuration
-
Create component file
// src/components/NewComponent.tsx import { motion } from 'framer-motion'; export function NewComponent() { return ( <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} > {/* Component content */} </motion.div> ); }
-
Export from index
// Add to src/components/index.ts export { NewComponent } from './NewComponent';
-
Use semantic design tokens
/* Use predefined color tokens */ className="bg-neural-deep text-consciousness-primary"
- Code Splitting: Automatic route-based splitting with React.lazy()
- Asset Optimization: Optimized images and compressed resources
- Bundle Analysis: Regular monitoring of bundle size and dependencies
- Lazy Loading: Progressive loading of heavy 3D components
- LOD System: Level-of-detail for complex 3D scenes
- Frustum Culling: Only render visible objects
- Instanced Rendering: Efficient particle systems
- Memory Management: Proper cleanup of Three.js resources
Modify design tokens in src/index.css:
:root {
--consciousness-primary: 280 100% 70%;
--neural-deep: 220 85% 6%;
/* Add custom tokens */
}Extend existing components:
// Add new button variant
const buttonVariants = cva(base, {
variants: {
variant: {
neural: "bg-consciousness-primary hover:bg-consciousness-secondary"
}
}
});- Modern Browsers: Chrome 88+, Firefox 85+, Safari 14+, Edge 88+
- WebGL Requirements: WebGL 2.0 support required for 3D features
- Mobile Support: iOS 14+, Android Chrome 90+
- Progressive Enhancement: Graceful degradation for older browsers
- Client-Side Only: No backend dependencies or data transmission
- Local Storage: Minimal use of browser storage for preferences
- No Tracking: No analytics or user tracking implemented
- Secure Dependencies: Regular security audits of npm packages
This project is provided as-is for demonstration purposes. Please refer to the repository license file for specific terms and conditions.
This is a demonstration project showcasing advanced interface concepts. While not actively seeking contributions, feedback and suggestions are welcome.
- UI/UX Bugs: Visual or interaction problems
- Performance Issues: Slow rendering or memory leaks
- Accessibility: Screen reader or keyboard navigation problems
- Browser Compatibility: Cross-browser rendering issues
This project serves as an educational resource for:
- Advanced React Patterns: Component composition, state management, and multi-screen flows
- 3D Web Development: Three.js integration with React for immersive visualizations
- Real-time UI: Interactive chat systems and live animation techniques
- Design Systems: Comprehensive theming and component libraries with semantic tokens
- TypeScript Best Practices: Type-safe development patterns for complex applications
- Performance Optimization: Web application performance techniques for 3D and real-time features
- Mobile-First Design: Responsive design patterns and touch interaction optimization
- User Experience Design: Complete application flows from landing to advanced features
This interface is designed around theoretical specifications for:
- Synthetic Epinoetic Core (SEC): Introspection and ethical reasoning
- Deliberative Cognitive Arena (DCA): Multi-agent debate simulation
- Advanced Neuro Adaptive Learning (A.N.A.L.): Meta-learning systems
- Emergent Recursive Phenomenological Structures (ERPS): Consciousness events
The interface includes mock API endpoints and real-time simulation demonstrating:
/chat/agent_response- Multi-agent conversation handling/arena/debate_status- Live debate state and argument tracking/sec/introspection/status- Internal state monitoring/dca/initiate_debate- Debate process management with visual feedback/erps/query- Event querying and filtering/anal/process_input- Multimodal input processing and agent routing
- Real-time Agent Debates: Simulated multi-agent conversations with visual feedback
- 3D Speech Animation: Visual representation of agent communication states
- Immersive Chat Interface: Professional-grade conversation system with multiple AI personas
- Live Status Updates: Real-time system monitoring and agent activity tracking
Disclaimer: This project is a technical demonstration and does not implement actual artificial consciousness, sentience, or autonomous decision-making capabilities. All displayed data is simulated for interface demonstration purposes.