Inspiration
Digital communication today allows people to stay connected, but it often fails to capture emotions in a meaningful way. Text messages and video calls rarely create a sense of emotional presence or shared mindfulness. We wanted to explore how immersive technologies and AI could help people express emotions in a more natural and engaging way.
EchoSphere was inspired by the idea of transforming emotions into interactive visual experiences inside a shared virtual environment. Our goal was to build a privacy-first platform where users could connect emotionally through immersive technology without requiring expensive hardware or paid AI services.
What it does
EchoSphere is a browser-based WebXR application that creates an immersive "Emotion Echo Lounge" where users can express and share emotions visually.
The platform analyses voice frequency to estimate emotional intensity and represents emotions as colourful floating 3D orbs. Calm emotions generate blue orbs, while higher-energy emotions generate warmer colours. Users can interact with these emotion orbs inside a virtual environment and collaborate with others in real time.
Key features include:
- AI-inspired emotion visualisation using voice analysis
- Interactive 3D emotion orbs
- Browser-based VR experience using WebXR
- Real-time multi-user collaboration with Socket.io
- Webcam passthrough simulation with emotion-based environmental tinting
- Session export as JSON for reflection and future analysis
- Accessibility features including keyboard controls and high-contrast mode
Everything runs directly inside the browser with no software installation required.
How we built it
EchoSphere was developed entirely using open web technologies.
Frontend technologies:
- Three.js
- WebXR API
- Web Audio API
- HTML5
- CSS3
- JavaScript
Backend technologies:
- Node.js
- Express.js
- Socket.io
The application uses the Web Audio API to analyse voice frequency and estimate emotional intensity. Three.js renders the immersive 3D environment while WebXR enables VR compatibility. Socket.io synchronises emotion orbs across multiple connected users, creating a shared collaborative experience.
The project was intentionally designed to work without external AI APIs or cloud-based machine learning services, ensuring that user privacy remains protected through local processing.
Challenges we ran into
Developing a browser-based immersive experience introduced several technical challenges.
Some of the biggest challenges included:
- Creating smooth WebXR interactions across different browsers
- Synchronising emotion objects between multiple users in real time
- Maintaining high rendering performance while multiple animated objects are active
- Designing intuitive interactions for both desktop users and VR headset users
- Building emotion visualisation without relying on expensive external AI services
Balancing performance, accessibility and user privacy required careful architectural decisions throughout development.
Accomplishments that we're proud of
We are proud that EchoSphere demonstrates how immersive technology can be used for meaningful social experiences rather than entertainment alone.
Our achievements include:
- Built a complete browser-based WebXR application
- Developed a real-time collaborative virtual environment
- Created AI-inspired emotion visualisation using voice input
- Implemented multiplayer synchronisation using Socket.io
- Designed a privacy-first architecture with client-side processing
- Delivered an installation-free experience that works directly in modern browsers
What we learned
Building EchoSphere provided valuable experience in immersive web development, real-time networking and interactive 3D graphics.
Throughout the project we learned:
- Practical WebXR development
- Three.js scene optimisation
- Real-time communication using WebSockets
- Voice signal processing
- Designing accessible immersive interfaces
- Building ethical and privacy-focused AI experiences
This project also strengthened our understanding of how emerging technologies can be applied to improve digital wellbeing and emotional communication.
What's next for EchoSphere – AI Emotion Echo Lounge
EchoSphere is only the beginning of a much larger vision.
Future improvements include:
- Real hand tracking using TensorFlow.js
- Facial emotion recognition
- Spatial audio experiences
- Persistent collaborative virtual rooms
- Mobile AR support
- AI-guided meditation and wellness sessions
- Emotion analytics for personal reflection
- Community wellbeing spaces for education, healthcare and remote teams
Our long-term vision is to create an emotionally intelligent immersive platform where technology helps people communicate, collaborate and connect in more meaningful ways while maintaining complete user privacy.
Log in or sign up for Devpost to join the conversation.