Quack

Inspiration Every developer knows the power of rubber duck debugging — explaining your problem out loud to an inanimate object until the answer clicks. We wondered: what if the duck actually listened? Not to solve your problem, but to hold up a mirror to your own thinking. Quack was born from the idea that sometimes you don't need answers — you need to hear your own thoughts reflected back, with just enough nudge to see what you already knew.

What it does Quack is a voice-first thinking companion that lives in your browser. Hold the mic (or spacebar), think out loud, and a 3D rubber duck floating through a starfield listens and responds in real time.

It has two modes:

Mirror mode: acts as a "thinking mirror" — it completes your trailing thoughts or asks the one question that reveals the contradiction in what you just said. One sentence max, always. Assistant mode: a calm, knowledgeable voice that can search the web for current information when needed. Quack speaks back using natural text-to-speech (Cartesia Sonic 2), transcribes your voice with a server-side STT pipeline, streams Claude's responses token-by-token, and persists conversation context. There's also a Memory Pool where you can save facts and notes that get injected into the AI's context for future conversations.

How we built it Next.js 16 with App Router and Turbopack for the frontend and API routes Claude Haiku 4.5 (via Anthropic SDK) for the conversational AI, with streaming responses and tool use for web search Cartesia Sonic 2 for high-quality text-to-speech LangSearch API for real-time web search when Claude needs current information Three.js with React Three Fiber and Drei for the 3D rubber duck (Khronos glTF sample model) that tumbles through space with physics-based drift A custom 2D canvas starfield with twinkling stars behind everything Supabase for session persistence SQLite (better-sqlite3) for the local knowledge/memory pool Framer Motion for UI animations throughout MediaRecorder API for browser-based audio capture with push-to-talk (hold mic or spacebar) Challenges we ran into Getting the 3D duck to look right and move naturally was a journey — we went through hand-built primitives, scaling issues where the camera ended up inside the model, and multiple iterations on the physics system before landing on the current gravity-based drift with soft bouncing. Balancing canvas size vs. model scale vs. viewport bounds took real trial and error.

Browser compatibility for voice input was tricky — MediaRecorder support and MIME types vary across browsers, so we built fallback paths and a text input mode for unsupported environments.

Streaming Claude's responses while simultaneously managing voice playback state (listening → thinking → speaking → idle) required careful ref-based state management to avoid race conditions.

Accomplishments that we're proud of The space-duck physics feel genuinely organic — gravity toward random waypoints, layered sine-wave drift, soft edge bouncing, and continuous tumble on all three axes Mirror mode's prompt engineering creates responses that feel uncannily like your own inner voice finishing your sentence The full voice loop works seamlessly: hold to speak → transcribe → stream AI response → speak it back, all with real-time visual feedback Web search integration that lets the assistant mode answer questions about current events without breaking the conversational flow The Memory Pool feature that gives the duck persistent context across conversations What we learned Prompt engineering for a "thinking mirror" is fundamentally different from building a helpful assistant — the constraint of one sentence and no advice forces a completely different design philosophy 3D in the browser is powerful but the relationship between canvas size, camera position, model scale, and viewport bounds is surprisingly non-intuitive Voice-first interfaces need careful state machine design — the transitions between idle/listening/thinking/speaking have to be bulletproof or the UX falls apart Streaming responses create a much better experience for voice apps than waiting for complete responses What's next for Quack Continuous listening mode with voice activity detection so you don't have to hold the button Multi-user sessions where people can think out loud together with the duck mediating Conversation history and pattern detection — surfacing recurring themes across sessions Mobile app with always-on background listening Custom voice cloning so the duck can respond in a voice that feels personal Integration with note-taking tools to export insights from thinking sessions

Built With

• anthropic-claude-haiku-4.5
• cartesia-sonic-2
• drei
• framer-motion
• gltf/glb-(khronos)
• langsearch-api
• mediarecorder-api
• next.js-16
• node.js
• react-19
• react-three-fiber
• sqlite-(better-sqlite3)
• supabase
• tailwind-css-4
• three.js
• typescript
• web-audio-api