Inspiration
Modern online communication often lacks emotional presence. Video calls and chat platforms allow people to communicate, but they rarely create a sense of emotional connection or shared mindfulness.
We wanted to explore a different approach: what if emotions could become visible, interactive, and shared inside an immersive virtual space?
EchoSphere was created as an experimental WebXR platform that transforms human emotions into dynamic 3D visual experiences, allowing people to connect through emotional expression rather than traditional text-based communication.
What it does
EchoSphere is a browser-based WebXR application that converts emotions into interactive floating orbs inside a shared virtual environment.
Users can enter a virtual "Echo Lounge" where:
- Voice input influences emotional visualization
- Calm emotions generate blue orbs
- Excited emotions generate red orbs
- Users can create and interact with emotion-based objects
- Multiple participants can join the same room in real time
- Sessions can be exported as JSON-based Echo Maps for reflection and analysis
The platform also includes a passthrough-style AI simulation using webcam overlays that adapt environmental colors based on detected emotional states.
The result is a unique digital wellness space that encourages emotional awareness, social connection, and mindful interaction.
How we built it
The project was built entirely using open web technologies without requiring any paid APIs or proprietary services.
Frontend Technologies:
- Three.js
- WebXR API
- Web Audio API
- MediaDevices API
- Socket.io Client
- HTML, CSS, JavaScript
Backend Technologies:
- Node.js
- Express.js
- Socket.io
The application uses Web Audio frequency analysis to estimate emotional intensity and map it to color-based visualizations. Three.js powers the immersive 3D environment while Socket.io synchronizes interactions between multiple users in real time.
Challenges we ran into
One of the biggest challenges was creating an engaging immersive experience while maintaining a completely browser-based architecture.
Other challenges included:
- Real-time synchronization of emotion orbs between users
- Managing WebXR compatibility across devices
- Designing intuitive interactions without specialized hardware
- Maintaining smooth rendering performance
- Building privacy-preserving AI features that operate entirely on-device
Accomplishments that we're proud of
- Built a fully browser-based WebXR experience
- Achieved real-time collaborative emotional visualization
- Created an AI-powered voice emotion interaction system
- Implemented multiplayer synchronization with Socket.io
- Maintained a privacy-first architecture with no external AI services
- Designed the project to work with both VR headsets and desktop browsers
What we learned
Through EchoSphere we gained hands-on experience with:
- WebXR development
- Three.js scene management
- Real-time networking with WebSockets
- Voice signal processing
- Accessibility-focused immersive design
- Ethical and privacy-preserving AI implementation
What's next for EchoSphere
Future development plans include:
- TensorFlow.js hand tracking
- Face-based emotion recognition
- Spatial audio environments
- Persistent cloud-based collaboration rooms
- Mobile AR support
- AI-guided wellness and meditation experiences
- Group emotional wellness sessions for communities and organizations
Our long-term vision is to transform EchoSphere into a platform for emotionally intelligent digital interaction where technology helps people feel more connected, understood, and present.
Log in or sign up for Devpost to join the conversation.