feat: Implement Orbi UI Design System with glassmorphic voice-first i… #11
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…nterface This commit transforms the node-voice-agent starter into a complete Next.js application featuring the Orbi design system—a voice-first AI assistant with beautiful glassmorphic aesthetics and ambient calm-tech visuals. Key Features: - ✨ Complete glassmorphic UI with translucent panels and backdrop blur - 🎨 Orbi color palette (lavenders, pinks, aqua-cyan tones) - 🎙️ Voice-reactive animated orb with canvas-based starfield - 🔄 Dual-mode interface (compact widget ↔ full dashboard) - 📱 Responsive layout with quad-panel dashboard - ♿ WCAG 2.2 accessibility compliant Components Implemented: - VoiceOrb: Animated central orb with state-reactive animations - GlassPanel: Draggable, collapsible glassmorphic panels - VoiceWidget: Minimizable floating voice control - Dashboard: Quad-panel layout with central orb - AmbientBackground: Flowing gradient animations - Chat History, Tools & Services, Documents & Files, Voice Settings panels Technical Stack: - Next.js 16 with App Router - React 19 with TypeScript - Tailwind CSS v4 with custom design tokens - Framer Motion for animations - Deepgram Voice Agent API integration - WebSocket-based real-time audio streaming Architecture: - Custom Next.js + WebSocket server (server.ts) - React hooks for voice agent state management - Environment-based configuration (.env) - Fully typed with TypeScript - Production-ready build system Configuration: - All settings customizable via .env variables - LLM model, STT/TTS providers configurable - Audio settings (sample rate, encoding) adjustable - Agent personality/prompt customizable Documentation: - Comprehensive ORBI_README.md with full design system specs - SETUP_INSTRUCTIONS.md for quick start - Inline code documentation - Environment variable reference This implementation provides a complete, production-ready foundation for building voice-first AI applications with beautiful, accessible UIs.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
…nterface
This commit transforms the node-voice-agent starter into a complete Next.js application featuring the Orbi design system—a voice-first AI assistant with beautiful glassmorphic aesthetics and ambient calm-tech visuals.
Key Features:
Components Implemented:
Technical Stack:
Architecture:
Configuration:
Documentation:
This implementation provides a complete, production-ready foundation for building voice-first AI applications with beautiful, accessible UIs.