I’ve built a fully interactive 3D Voice Orb in Three.js for clients, designed to feel alive and r...I’ve built a fully interactive 3D Voice Orb in Three.js for clients, designed to feel alive and r...
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Joshua's avatar
Joshua Dagogo-George
• Dec 3
I’ve built a fully interactive 3D Voice Orb in Three.js for clients, designed to feel alive and responsive. The orb has four core states, each giving users visual feedback on what the system is doing:
Idle: a calm breathing animation, keeping the orb alive without demanding attention.
Listening: the orb tightens and brightens slightly, showing it’s focused and ready for input.
Speaking: fully audio-reactive, it pulses, glows, and moves based on real-time volume and frequencies, giving the “voice” a visual personality.
Thinking: looping subtle animations like swirling cores or orbiting rings, signaling background processing.
The goal was to make an interface that communicates state and emotion without words, and all of it runs smoothly in Three.js.
Interaction Designmotiongraphicsthree.js
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started