Resonate

Meet the only study buddy who’ll interrupt your 2 AM breakdown to say, 'Stop crying, look at this draggable circuit I just built for you.' He sees your struggle and fixes it in real-time.

Comment

Inspiration

We are living in the golden age of AI, yet most of our interactions are still trapped in static text boxes. We realized that typing prompts feels transactional and robotic; it lacks the nuance, speed, and connection of a real conversation. We wanted to break the silence of the standard chatbot interface. Resonate was born from a desire to humanize the machine—to move away from "input/output" and toward "listening and speaking," creating an experience that feels less like using a tool and more like consulting a partner.

What it does

Resonate is a voice-first AI web application designed to simulate a natural, fluid human call. Instead of a chat history, users enter a "Session."

Immersive Interface: Upon clicking "Start Session," the UI transitions into a minimalist focus mode, stripping away distractions.

Audio-Visual Sync: As the AI speaks, a custom-built top bar visualizer pulses rhythmically, giving the voice a physical presence.

Real-Time Transcription: While the experience is voice-first, the system types out the conversation in real-time with a human-like cadence, ensuring accessibility and clarity without breaking immersion.

State Awareness: The system intelligently manages states (Listening, Thinking, Speaking, Paused), giving the user clear visual cues via the center grid and control bar.

How we built it

We focused heavily on frontend fidelity to achieve the "Google Product" aesthetic. The interface was built using a component-based architecture to ensure the UI elements—specifically the top control bar and the center focus grid—remained perfectly centered across all device sizes.

The "Call" Logic: We engineered a state machine to handle the delicate transitions between the "Start Session" button, the "Calling..." loader, and the active session, ensuring zero visual jank.

Audio Visualization: The wave animations aren't just looped GIFs; they are reactive elements that respond to the state of the AI agent, providing immediate feedback to the user.

Stream Handling: We implemented real-time text streaming to match the audio output, creating the illusion that the AI is "thinking" and typing as it speaks.

Challenges we ran into

The biggest hurdle was the "Uncanny Valley" of latency. In a voice call, even a second of silence feels like an eternity. We had to optimize the handoff between the user's voice input and the AI's audio response to make it feel snappy. Additionally, visual polishing was a challenge. Achieving that high-key, clean "Google" look requires precise whitespace management and subtle shadow application. We spent hours tweaking the easing curves on the "Start Session" zoom transition to make sure it felt premium, not jittery.

Accomplishments that we're proud of

We are incredibly proud of the User Experience (UX) flow. The transition from a static web page to a live "call" feels genuinely seamless. Getting the audio visualizer dots to look organic rather than mechanical was a small detail that made a huge difference in how "alive" the AI feels. We successfully created an interface where the technology recedes into the background, letting the conversation take center stage.

What we learned

We learned that silence is a design element. In a voice interface, visual cues (like the pulsing loading circle or the "AI: Idle" status) are critical to keeping the user grounded. We also discovered that "humanizing" AI isn't just about the voice model—it's about the pacing of the UI. If the text appears too fast, it breaks the illusion; if it appears too slow, it frustrates the user. Finding that balance was a key lesson in interaction design.

What's next for Resonate

We are moving from "Conversation" to "Action."

Agentic UI Control: We want the AI to have "hands." The goal is for the user to be able to say, "Switch to dark mode," or "Open my dashboard," and have the AI navigate and manipulate the UI in real-time.

Full Duplex Voice: Improving the interruption handling so users can cut the AI off naturally, just like in a real debate or brainstorming session.

Personality Calibration: Allowing users to tune the "warmth" or "professionalism" of the voice to suit the context of the session.

Built With

Share this project:

Updates