Demo Conversation
The 30-second demo interview itself (D2/D3): claims the daily quota, asks and speaks one question, records the answer, and grades it for real. A pause in speech ends recognition but does not submit — the visitor reviews the transcript and presses "Finish answer" themselves, and a browser with no SpeechRecognition gets a text field instead of a dead end.
Live
The real component. Unlike the mic check, this one is not free to run: it claims your actual daily demo quota and calls billed Gemini TTS and grading, so it stays off until you ask for it.
Starting this claims a real demo quota slot and calls billed TTS/grading — same as pressing "Start demo" on /setup.
| Prop | Type | Default | Description |
|---|---|---|---|
| language | 'ua' | 'en' | — | Picks the copy from `demoCopy` and the TTS/recognition locale. |
| onGraded | ({ overall, criteria }) => void | — | A real reading from `/api/grade`. Fires once, at the end of D3. |
| onQuotaUsed | () => void | — | `/api/demo` returned 429 — today's per-IP quota is spent. |
| onError | () => void | — | Any other failure — network, TTS, or grading. Never shown as a dead end here; the parent routes to the form. |
States
All six stages plus the text-input fallback, drawn through `DemoConversationView` with no network or device access — including `reviewing`, which only exists once a real answer has been heard, and the fallback, which only exists in a browser with no SpeechRecognition.
Demo interview
Preparing your question…
Demo interview
Tell me about a product you recently made better. What exactly did you change — and how did you know that was the thing to change?
Demo interview
Tell me about a product you recently made better. What exactly did you change — and how did you know that was the thing to change?
Tap the mic and answer
Demo interview
Tell me about a product you recently made better. What exactly did you change — and how did you know that was the thing to change?
Recording… tap again to stop
Demo interview
Tell me about a product you recently made better. What exactly did you change — and how did you know that was the thing to change?
I noticed our onboarding checklist had a 40% drop-off on step three, so I added a live preview of the result before asking for the input that produced it.
Demo interview
Tell me about a product you recently made better. What exactly did you change — and how did you know that was the thing to change?
Tap the mic and answer
Say something before finishing
Demo interview
Tell me about a product you recently made better. What exactly did you change — and how did you know that was the thing to change?
- Analyzing your response...
Demo interview
Tell me about a product you recently made better. What exactly did you change — and how did you know that was the thing to change?
Microphone isn't available in this browser — type your answer instead
| Prop | Type | Default | Description |
|---|---|---|---|
| stage | 'claiming' | 'asking' | 'ready' | 'recording' | 'reviewing' | 'grading' | — | What has happened so far. |
| question | string | — | The demo question — shown once claimed, hidden during `claiming`. |
| transcript | string | — | Captured (mic) or typed (fallback) answer. |
| nudge | string | null | null | Inline validation — set only after "Finish answer" was pressed on nothing. |
| speechAvailable | boolean | — | `false` swaps the mic controls for a text field. |
VoiceMock was built by one designer
I'm Sergiy, a product designer. I built this trainer myself — research, design system, code. On LinkedIn I show how products like this come together, and what it changes in a designer's work.
Product Designer · AI Design Engineer · Designer for Startups
See it on LinkedIn