PageSourceSearch

https://voicedom.dev/

html voicedom.dev collected 2026-10-02 01:52:37 UTC 42,095 bytes, 687 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>VoiceDOM — Fast UI Handoff for AI Coding Agents</title>
7  <meta name="description" content="Click any UI element, speak your change, and get instant transcription plus structured context for Cursor, Codex, Claude Code, and more.">
8  <link rel="canonical" href="https://voicedom.dev/">
9  <link rel="icon" type="image/png" href="/favicon.png">
10  <meta name="robots" content="index, follow">
11  <meta name="theme-color" content="#d57724">
12
13  <!-- Open Graph -->
14  <meta property="og:type" content="website">
15  <meta property="og:url" content="https://voicedom.dev/">
16  <meta property="og:site_name" content="VoiceDOM">
17  <meta property="og:title" content="VoiceDOM — Fast UI Handoff for AI Coding Agents">
18  <meta property="og:description" content="Click any UI element, speak your change, and get instant transcription plus structured context for Cursor, Codex, Claude Code, and more.">
19  <meta property="og:image" content="https://voicedom.dev/og-image.png">
20
21  <!-- Twitter Card -->
22  <meta name="twitter:card" content="summary_large_image">
23  <meta name="twitter:title" content="VoiceDOM — Fast UI Handoff for AI Coding Agents">
24  <meta name="twitter:description" content="Click any UI element, speak your change, and get instant transcription plus structured context for Cursor, Codex, Claude Code, and more.">
25  <meta name="twitter:image" content="https://voicedom.dev/og-image.png">
26
27  
27<script id="datafast-queue">
28    window.datafast = window.datafast || function() {
29      window.datafast.q = window.datafast.q || [];
30      window.datafast.q.push(arguments);
31    };
32  </script>
32
33  
33<script defer data-website-id="dfid_RcuYswbVjFBkQSli0ctaK" data-domain="voicedom.dev" src="https://datafa.st/js/script.js"></script>
33
34  <link rel="preconnect" href="https://fonts.googleapis.com">
35  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
36  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;600&family=Sora:wght@400;500;600;700;800&display=swap" rel="stylesheet">
37  
37<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
37
38  <style type="text/tailwindcss">
39    @theme {
40      --font-sans: "Sora", ui-sans-serif, system-ui, sans-serif;
41      --font-mono: "JetBrains Mono", ui-monospace, monospace;
42      --color-brand: oklch(0.68 0.17 45);
43      --color-brand-dark: oklch(0.58 0.17 45);
44      --color-surface: oklch(0.97 0.004 280);
45      --color-ink: oklch(0.22 0.01 280);
46      --color-muted: oklch(0.48 0.01 280);
47    }
48
49    html { scroll-behavior: smooth; }
50
51    body {
52      font-family: var(--font-sans);
53      color: var(--color-ink);
54      background: var(--color-surface);
55    }
56
57    .btn-primary {
58      @apply inline-flex items-center justify-center gap-2 rounded-full bg-[var(--color-brand)] px-6 py-3.5 text-base font-semibold text-white shadow-[inset_0_0_0_1px_rgba(0,0,0,0.08)] transition hover:bg-[var(--color-brand-dark)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-brand)];
59    }
60
61    .btn-secondary {
62      @apply inline-flex items-center justify-center gap-2 rounded-full border border-black/10 bg-white px-6 py-3.5 text-base font-semibold text-[var(--color-ink)] shadow-sm transition hover:bg-zinc-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-400;
63    }
64
65    .section-pad { @apply py-16 md:py-24; }
66
67    details summary { @apply cursor-pointer list-none; }
68    details summary::-webkit-details-marker { display: none; }
69
70    #demo-modal:not(.is-open) { display: none; }
71    #demo-modal.is-open { display: flex; }
72
73    .hiw-mock {
74      @apply relative overflow-hidden rounded-xl border border-black/6 bg-zinc-100/70;
75    }
76
77    .hiw-mock .sel-class { color: oklch(0.52 0.14 285); }
78    .hiw-mock .sel-tag { color: oklch(0.48 0.12 155); }
79
80    @keyframes hiw-dot-pulse {
81      0%, 100% { opacity: 0.35; transform: scaleY(0.55); }
82      50% { opacity: 1; transform: scaleY(1); }
83    }
84
85    .hiw-wave span {
86      animation: hiw-dot-pulse 1.2s ease-in-out infinite;
87    }
88    .hiw-wave span:nth-child(2) { animation-delay: 0.1s; }
89    .hiw-wave span:nth-child(3) { animation-delay: 0.2s; }
90    .hiw-wave span:nth-child(4) { animation-delay: 0.3s; }
91    .hiw-wave span:nth-child(5) { animation-delay: 0.4s; }
92    .hiw-wave span:nth-child(6) { animation-delay: 0.5s; }
93    .hiw-wave span:nth-child(7) { animation-delay: 0.6s; }
94    .hiw-wave span:nth-child(8) { animation-delay: 0.7s; }
95    .hiw-wave span:nth-child(9) { animation-delay: 0.8s; }
96    .hiw-wave span:nth-child(10) { animation-delay: 0.9s; }
97
98    .provider-mock-item.is-active {
99      @apply border-[var(--color-brand)]/40 bg-orange-50/80 ring-1 ring-[var(--color-brand)]/20;
100    }
101  </style>
102</head>
103<body class="antialiased text-[15px] leading-relaxed">
104
105  <!-- Sticky header -->
106  <header class="sticky top-0 z-50 border-b border-black/5 bg-[var(--color-surface)]/90 backdrop-blur-md">
107    <div class="mx-auto flex max-w-6xl items-center justify-between gap-4 px-5 py-3">
108      <a href="/" class="flex items-center gap-2">
109        <img src="voice-DOM-logo.png" alt="VoiceDOM" class="h-7 w-auto">
110      </a>
111      <nav class="hidden items-center gap-6 text-sm font-medium text-[var(--color-muted)] md:flex">
112        <button type="button" data-demo-open class="cursor-pointer bg-transparent text-sm font-medium text-[var(--color-muted)] hover:text-[var(--color-ink)]">Demo</button>
113        <a href="#how-it-works" class="hover:text-[var(--color-ink)]">How it works</a>
114        <a href="#pricing" class="hover:text-[var(--color-ink)]">Pricing</a>
115        <a href="#faq" class="hover:text-[var(--color-ink)]">FAQ</a>
116      </nav>
117      <a href="https://chromewebstore.google.com/detail/voicedom-%E2%80%94-the-voice-feed/bifembmpcmalfadielpfjonjkjdioacm" target="_blank" rel="noopener" data-fast-goal="add_to_chrome" data-fast-goal-location="header" class="btn-primary shrink-0 px-5 py-2.5 text-sm"><img src="chrome.svg" alt="" class="h-4 w-4 shrink-0" aria-hidden="true">Add to Chrome</a>
118    </div>
119  </header>
120
121  <main>
122
123    <!-- Hero -->
124    <section class="section-pad pt-12 md:pt-16">
125      <div class="mx-auto grid max-w-6xl items-center gap-10 px-5 lg:grid-cols-2 lg:gap-16">
126        <div class="flex flex-col gap-5">
127          <p class="font-mono text-xs font-semibold uppercase tracking-widest text-[var(--color-brand)]">Chrome extension</p>
128          <h1 class="text-3xl font-extrabold leading-[1.08] tracking-tight md:text-4xl lg:text-5xl">
129            UI feedback that moves as fast as you speak.
130          </h1>
131          <p class="max-w-lg text-lg text-[var(--color-muted)]">
132            Click any element, speak naturally, and get transcribed instructions with exact context for
133            <strong class="font-semibold text-[var(--color-ink)]">Cursor, Codex, Claude Code</strong>, and other AI coding agents.
134          </p>
135          <p class="font-mono text-sm font-semibold text-[var(--color-ink)]">BYOK · No subscription · Start free</p>
136          <div id="install" class="flex flex-wrap gap-3 pt-1">
137            <a href="https://chromewebstore.google.com/detail/voicedom-%E2%80%94-the-voice-feed/bifembmpcmalfadielpfjonjkjdioacm" target="_blank" rel="noopener" data-fast-goal="add_to_chrome" data-fast-goal-location="hero" class="btn-primary text-lg"><img src="chrome.svg" alt="" class="h-5 w-5 shrink-0" aria-hidden="true">Add to Chrome — free</a>
138            <button type="button" data-demo-open class="btn-secondary">
139              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
140                <path d="M8 5.14v13.72c0 .88 1.02 1.36 1.68.78l10.02-6.86a1 1 0 0 0 0-1.56L9.68 4.36A1 1 0 0 0 8 5.14Z"/>
141              </svg>
142              Watch demo
143            </button>
144          </div>
145          <p class="text-sm text-[var(--color-muted)]">Install in under a minute. Free tier uses Groq — bring your own API key.</p>
146        </div>
147
148        <figure id="demo" class="overflow-hidden rounded-2xl border border-black/10 bg-zinc-900 p-2 shadow-lg shadow-black/5">
149          <video
150            id="demo-preview"
151            class="w-full rounded-xl"
152            src="demo-video.mp4"
153            width="1546"
154            height="1080"
155            controls
156            playsinline
157            muted
158            loop
159            autoplay
160            preload="metadata"
161            aria-label="VoiceDOM demo preview"
162          >
163            Your browser does not support embedded video. <a href="demo-video.mp4">Download the demo</a>.
164          </video>
165          <figcaption class="px-2 py-3 font-mono text-xs text-[var(--color-muted)]">
166            17s demo · pick → record → transcribe → copy agent-ready markdown
167          </figcaption>
168        </figure>
169      </div>
170    </section>
171
172    <!-- Before / After -->
173    <section class="border-y border-black/5 bg-white section-pad">
174      <div class="mx-auto max-w-6xl px-5">
175        <div class="mx-auto mb-10 max-w-2xl text-center">
176          <h2 class="text-3xl font-extrabold tracking-tight md:text-4xl">Stop typing UI feedback. Point and speak instead.</h2>
177          <p class="mt-3 text-[var(--color-muted)]">
178            VoiceDOM links your spoken request to the exact DOM element — so agents get clear text, selectors, and page context without back-and-forth.
179          </p>
180        </div>
181        <div class="grid gap-4 md:grid-cols-2 md:gap-6">
182          <article class="rounded-2xl border border-black/8 bg-zinc-50 p-6">
183            <p class="mb-2 font-mono text-xs font-semibold uppercase tracking-wider text-[var(--color-muted)]">Before</p>
184            <p class="text-lg font-semibold">2–5 minutes rewriting visual feedback</p>
185            <p class="mt-2 text-[var(--color-muted)]">Still unclear which element changed or what the agent should touch.</p>
186          </article>
187          <article class="rounded-2xl border-2 border-[var(--color-brand)]/30 bg-orange-50/60 p-6">
188            <p class="mb-2 font-mono text-xs font-semibold uppercase tracking-wider text-[var(--color-brand)]">After VoiceDOM</p>
189            <p class="text-lg font-semibold">20–40 seconds to speak and paste</p>
190            <p class="mt-2 text-[var(--color-muted)]">Structured markdown with selector, URL, component name, and transcript — ready for your agent.</p>
191          </article>
192        </div>
193      </div>
194    </section>
195
196    <!-- How it works -->
197    <section id="how-it-works" class="section-pad">
198      <div class="mx-auto max-w-6xl px-5">
199        <div class="mb-12 max-w-xl">
200          <h2 class="text-3xl font-extrabold tracking-tight md:text-4xl">From idea to agent in under a minute</h2>
201          <p class="mt-3 text-[var(--color-muted)]">Three steps. No layout shift. Annotations saved per site.</p>
202        </div>
203
204        <ol class="grid gap-5 lg:grid-cols-3">
205          <!-- Step 1 -->
206          <li class="flex flex-col rounded-2xl border border-black/8 bg-white p-5 shadow-sm">
207            <div class="flex gap-4">
208              <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[var(--color-brand)] font-mono text-sm font-bold text-white">1</span>
209              <div>
210                <h3 class="font-bold">Select any element</h3>
211                <p class="mt-1 text-sm text-[var(--color-muted)]">Crosshair picker with DevTools-style highlight. React component names when available.</p>
212              </div>
213            </div>
214
215            <div class="hiw-mock mt-5 min-h-[168px] p-3 pb-10" aria-hidden="true">
216              <div class="flex gap-2">
217                <div class="flex-1 rounded-xl border border-black/6 bg-white p-2.5 shadow-sm">
218                  <div class="flex items-center gap-2">
219                    <span class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-[var(--color-brand)] font-mono text-[9px] font-bold text-white">1</span>
220                    <span class="rounded border border-dashed border-[var(--color-brand)] px-1.5 py-0.5 text-[10px] font-bold leading-tight">Select any element</span>
221                  </div>
222                </div>
223                <div class="w-[38%] rounded-xl border border-black/6 bg-white p-2.5 opacity-50 shadow-sm">
224                  <div class="flex items-center gap-2">
225                    <span class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-[var(--color-brand)] font-mono text-[9px] font-bold text-white">2</span>
226                    <span class="h-2.5 w-16 rounded bg-zinc-200"></span>
227                  </div>
228                </div>
229              </div>
230
231              <div class="absolute bottom-2 left-1/2 z-10 w-[92%] max-w-[220px] -translate-x-1/2 roun
231ded-2xl border border-black/8 bg-white p-2.5 shadow-lg shadow-black/10">
232                <div class="flex items-center gap-1.5">
233                  <span class="flex h-4 w-4 shrink-0 items-center justify-center rounded bg-[var(--color-ink)] font-mono text-[8px] font-bold text-white">1</span>
234                  <p class="truncate font-mono text-[9px] leading-none"><span class="sel-class">.shadow-sm:nth-child(1)</span> <span class="sel-tag">h3</span></p>
235                </div>
236                <div class="mt-2 flex justify-center gap-0.5">
237                  <span class="h-1 w-1 rounded-full bg-zinc-300"></span>
238                  <span class="h-1 w-1 rounded-full bg-zinc-300"></span>
239                  <span class="h-1 w-1 rounded-full bg-zinc-300"></span>
240                  <span class="h-1 w-1 rounded-full bg-zinc-300"></span>
241                  <span class="h-1 w-1 rounded-full bg-zinc-300"></span>
242                </div>
243                <p class="mt-1 text-center font-mono text-[10px] font-semibold tabular-nums">00:00</p>
244                <div class="mt-2 rounded-full bg-[var(--color-ink)] py-1.5 text-center text-[10px] font-semibold text-white">Stop</div>
245                <div class="mt-1.5 flex gap-1">
246                  <span class="flex-1 rounded-full bg-zinc-100 py-1 text-center text-[8px] font-medium text-zinc-500">Cancel <span class="text-zinc-400">ESC</span></span>
247                  <span class="flex-1 rounded-full bg-orange-200/80 py-1 text-center text-[8px] font-semibold text-white">Save ↵</span>
248                </div>
249              </div>
250            </div>
251          </li>
252
253          <!-- Step 2 -->
254          <li class="flex flex-col rounded-2xl border border-black/8 bg-white p-5 shadow-sm">
255            <div class="flex gap-4">
256              <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[var(--color-brand)] font-mono text-sm font-bold text-white">2</span>
257              <div>
258                <h3 class="font-bold">Speak your change</h3>
259                <p class="mt-1 text-sm text-[var(--color-muted)]">Mic permission once. Transcribe with your Groq key on Free, or any provider on Pro.</p>
260              </div>
261            </div>
262
263            <div class="hiw-mock mt-5 flex min-h-[168px] items-center justify-center p-4" aria-hidden="true">
264              <div class="w-full max-w-[220px] rounded-2xl border border-black/8 bg-white p-3 shadow-md shadow-black/8">
265                <div class="flex items-center gap-1.5">
266                  <span class="flex h-4 w-4 shrink-0 items-center justify-center rounded bg-[var(--color-ink)] font-mono text-[8px] font-bold text-white">1</span>
267                  <p class="truncate font-mono text-[9px] leading-none"><span class="sel-class">.shadow-sm:nth-child(1)</span> <span class="sel-tag">h3</span></p>
268                </div>
269
270                <div class="hiw-wave mt-3 flex items-end justify-center gap-[3px]">
271                  <span class="block h-2 w-[3px] rounded-full bg-zinc-300"></span>
272                  <span class="block h-3 w-[3px] rounded-full bg-zinc-400"></span>
273                  <span class="block h-4 w-[3px] rounded-full bg-zinc-500"></span>
274                  <span class="block h-3 w-[3px] rounded-full bg-zinc-400"></span>
275                  <span class="block h-5 w-[3px] rounded-full bg-zinc-600"></span>
276                  <span class="block h-3 w-[3px] rounded-full bg-zinc-400"></span>
277                  <span class="block h-4 w-[3px] rounded-full bg-zinc-500"></span>
278                  <span class="block h-2 w-[3px] rounded-full bg-zinc-300"></span>
279                  <span class="block h-3 w-[3px] rounded-full bg-zinc-400"></span>
280                  <span class="block h-2 w-[3px] rounded-full bg-zinc-300"></span>
281                </div>
282
283                <p class="mt-2 text-center font-mono text-[11px] font-semibold tabular-nums">00:05</p>
284                <div class="mt-2.5 rounded-full bg-[var(--color-ink)] py-2 text-center text-[11px] font-semibold text-white">Stop</div>
285                <div class="mt-2 flex gap-1.5">
286                  <span class="flex flex-1 items-center justify-center gap-1 rounded-full bg-zinc-100 py-1.5 text-[9px] font-medium text-zinc-600">
287                    Cancel <span class="rounded bg-white px-1 py-px font-mono text-[7px] text-zinc-400">ESC</span>
288                  </span>
289                  <span class="flex flex-1 items-center justify-center gap-1 rounded-full bg-[#fbc4b4] py-1.5 text-[9px] font-semibold text-white">
290                    Save <span class="rounded bg-white/25 px-1 py-px font-mono text-[7px]">↵</span>
291                  </span>
292                </div>
293              </div>
294            </div>
295          </li>
296
297          <!-- Step 3 -->
298          <li class="flex flex-col rounded-2xl border border-black/8 bg-white p-5 shadow-sm">
299            <div class="flex gap-4">
300              <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[var(--color-brand)] font-mono text-sm font-bold text-white">3</span>
301              <div>
302                <h3 class="font-bold">Ship to your agent</h3>
303                <p class="mt-1 text-sm text-[var(--color-muted)]">Copy structured markdown or let Pro MCP read annotations live — no copy-paste.</p>
304              </div>
305            </div>
306
307            <div class="hiw-mock mt-5 flex min-h-[168px] items-start justify-center p-3" aria-hidden="true">
308              <div class="w-full max-w-[240px] overflow-hidden rounded-2xl border border-black/8 bg-white shadow-md shadow-black/8">
309                <div class="flex items-center justify-between border-b border-black/6 px-3 py-2">
310                  <div class="flex items-center gap-1.5">
311                    <span class="text-[11px] font-bold">Annotations</span>
312                    <span class="rounded-full bg-[var(--color-brand)] px-1.5 py-px font-mono text-[8px] font-bold text-white">2</span>
313                  </div>
314                  <span class="text-sm leading-none text-zinc-400">−</span>
315                </div>
316
317                <div class="border-b border-black/6 px-3 py-2">
318                  <div class="flex items-start gap-1.5">
319                    <span class="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded bg-[var(--color-ink)] font-mono text-[8px] font-bold text-white">1</span>
320                    <div class="min-w-0 flex-1">
321                      <p class="truncate font-mono text-[9px] leading-tight"><span class="sel-class">.shadow-sm:nth-child(1)</span> <span class="sel-tag">h3</span></p>
322                      <p class="mt-0.5 text-[9px] leading-snug text-[var(--color-muted)]">Okay, we are talking here about something.</p>
323                    </div>
324                    <span class="text-[10px] text-zinc-400">×</span>
325                  </div>
326                </div>
327
328                <div class="px-3 py-2">
329                  <div class="flex items-start gap-1.5">
330                    <span class="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded bg-[var(--color-ink)] font-mono text-[8px] font-bold text-white">2</span>
331                    <div class="min-w-0 flex-1">
332                      <p class="truncate font-mono text-[9px] leading-tight"><span class="sel-class">.shadow-sm:nth-child(2)</span></p>
333                      <p class="mt-0.5 text-[9px] leading-snug text-[var(--color-muted)]">change this card to something better.</p>
334                    </div>
335                    <span class="text-[10px] text-zinc-400">×</span>
336                  </div>
337                </div>
338
339                <div class="flex gap-1.5 border-t border-black/6 p-2">
340                  <span class="flex-1 rounded-full bg-[var(--color-brand)] py-1.5 text-center text-[9px] font-semibold text-white">Copy all</span>
341                  <span class="flex-1 rounded-full border border-black/10 bg-zinc-50 py-1.5 text-center text-[9px] font-semibold">Clear</span>
342                </div>
343              </div>
344            </div>
345          </li>
346        </ol>
347      </div>
348    </section>
349
350    <!-- Features -->
351    <section class="border-t border-black/5 bg-white section-pad">
352      <div class="mx-auto max-w-6xl px-5">
353        <h2 class="mb-10 text-center text-3xl font-extrabold tracking-tight md:text-4xl">Built for real web app work</h2>
354        <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
355          <article class="rounded-2xl border border-black/8 p-6">
356            <div class="mb-4 h-1 w-8 rounded-full bg-[var(--color-brand)]" aria-hidden="true"></div>
357            <h3 class="font-bold">Non-destructive picker</h3>
358            <p class="mt-2 text-sm text-[var(--color-muted)]">Highlight overlay with zero layout shift. Works on dynamic SPAs and modern frameworks.</p>
359          </article>
360          <article class="rounded-2xl border border-black/8 p-6">
361            <div class="mb-4 h-1 w-8 rounded-full bg-[var(--color-brand)]" aria-hidden="true"></div>
362            <h3 class="font-bold">Voice → text, instantly</h3>
363            <p class="mt-2 text-sm text-[var(--color-muted)]">Groq Whisper on Free with your own key. Pro unlocks OpenAI, Deepgram, ElevenLabs, and more.</p>
364          </article>
365          <article class="rounded-2xl border border-black/8 p-6">
366            <div class="mb-4 h-1 w-8 rounded-full bg-[var(--color-brand)]" aria-hidden="true"></div>
367            <h3 class="font-bold">Agent-ready export</h3>
368            <p class="mt-2 text-sm text-[var(--color-muted)]">Markdown with selector, XPath, tag, component name, URL, and optional screenshot refs.</p>
369          </article>
370          <article class="rounded-2xl border border-black/8 p-6">
371            <div class="mb-4 h-1 w-8 rounded-full bg-[var(--color-brand)]" aria-hidden="true"></div>
372            <h3 class="font-bold">Saved per site</h3>
373            <p class="mt-2 text-sm text-[var(--color-muted)]">Annotations persist in local storage, grouped by hostname. Review and clear from settings.</p>
374          </article>
375          <article class="rounded-2xl border border-black/8 p-6">
376            <div class="mb-4 h-1 w-8 rounded-full bg-[var(--color-brand)]" aria-hidden="true"></div>
377            <h3 class="font-bold">Component detection</h3>
378            <p class="mt-2 text-sm text-[var(--color-muted)]">Fiber introspection shows <code class="rounded bg-zinc-100 px-1 font-mono text-xs">&lt;LoginButton /&gt;</code> alongside the CSS selector.</p>
379          </article>
380          <article class="rounded-2xl border border-black/8 p-6">
381            <div class="mb-4 h-1 w-8 rounded-full bg-[var(--color-brand)]" aria-hidden="true"></div>
382            <h3 class="font-bold">MCP in Pro</h3>
383            <p class="mt-2 text-sm text-[var(--color-muted)]">Claude Code reads your annotations directly from a local MCP server — skip the clipboard. <a href="/mcp" class="font-medium text-[var(--color-brand)] underline decoration-[var(--color-brand)]/30 underline-offset-2 hover:
383decoration-[var(--color-brand)]">Setup guide →</a></p>
384          </article>
385        </div>
386      </div>
387    </section>
388
389    <!-- BYOK / providers -->
390    <section class="section-pad py-12">
391      <div class="mx-auto max-w-6xl px-5">
392        <div class="overflow-hidden rounded-3xl border border-black/8 bg-white shadow-sm shadow-black/5">
393          <div class="grid lg:grid-cols-[1fr_minmax(0,340px)]">
394            <div class="flex flex-col justify-center gap-4 p-6 md:p-10 lg:border-r lg:border-black/6">
395              <p class="font-mono text-xs font-semibold uppercase tracking-widest text-[var(--color-brand)]">Bring your own key</p>
396              <h2 class="text-2xl font-extrabold tracking-tight md:text-3xl">Your keys stay local. Pick any provider.</h2>
397              <p class="max-w-md text-[var(--color-muted)]">
398                API keys live in your browser profile — never on our servers. Start with Groq on Free, then switch to OpenAI, Deepgram, ElevenLabs, or another supported provider whenever you want.
399              </p>
400              <ul class="mt-1 flex flex-wrap gap-2 text-sm">
401                <li class="inline-flex items-center gap-1.5 rounded-full border border-black/8 bg-zinc-50 px-3 py-1 font-medium">
402                  <svg class="h-3.5 w-3.5 text-[var(--color-brand)]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
403                  Keys stored locally
404                </li>
405                <li class="inline-flex items-center gap-1.5 rounded-full border border-black/8 bg-zinc-50 px-3 py-1 font-medium">
406                  <svg class="h-3.5 w-3.5 text-[var(--color-brand)]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M16 3h5v5"/><path d="M8 3H3v5"/><path d="M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3"/><path d="m15 9 6-6"/></svg>
407                  Switch anytime
408                </li>
409                <li class="inline-flex items-center gap-1.5 rounded-full border border-black/8 bg-zinc-50 px-3 py-1 font-medium">
410                  <svg class="h-3.5 w-3.5 text-[var(--color-brand)]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"/></svg>
411                  No key on our servers
412                </li>
413              </ul>
414            </div>
415
416            <div class="bg-gradient-to-br from-zinc-50 to-zinc-100/80 p-5 md:p-6" aria-hidden="true">
417              <div class="mx-auto w-full max-w-[300px] overflow-hidden rounded-2xl border border-black/8 bg-white shadow-md shadow-black/8">
418                <div class="border-b border-black/6 px-4 py-3">
419                  <p class="text-sm font-bold">Transcription</p>
420                  <p class="mt-0.5 text-xs text-[var(--color-muted)]">Choose a provider and paste your API key</p>
421                </div>
422
423                <div class="flex flex-col gap-1.5 p-3">
424                  <div class="provider-mock-item is-active flex items-center justify-between rounded-xl border border-transparent px-3 py-2.5">
425                    <div class="flex items-center gap-2.5">
426                      <span class="flex h-7 w-7 items-center justify-center rounded-lg bg-orange-100 font-mono text-[10px] font-bold text-orange-700">Gq</span>
427                      <div>
428                        <p class="text-xs font-semibold">Groq</p>
429                        <p class="text-[10px] text-[var(--color-muted)]">Whisper · Free tier</p>
430                      </div>
431                    </div>
432                    <span class="flex h-4 w-4 items-center justify-center rounded-full bg-[var(--color-brand)] text-[9px] font-bold text-white">✓</span>
433                  </div>
434
435                  <div class="provider-mock-item flex items-center justify-between rounded-xl border border-transparent px-3 py-2.5 opacity-80">
436                    <div class="flex items-center gap-2.5">
437                      <span class="flex h-7 w-7 items-center justify-center rounded-lg bg-zinc-100 font-mono text-[10px] font-bold text-zinc-600">AI</span>
438                      <div>
439                        <p class="text-xs font-semibold">OpenAI</p>
440                        <p class="text-[10px] text-[var(--color-muted)]">Whisper API · Pro</p>
441                      </div>
442                    </div>
443                  </div>
444
445                  <div class="provider-mock-item flex items-center justify-between rounded-xl border border-transparent px-3 py-2.5 opacity-80">
446                    <div class="flex items-center gap-2.5">
447                      <span class="flex h-7 w-7 items-center justify-center rounded-lg bg-zinc-100 font-mono text-[10px] font-bold text-zinc-600">DG</span>
448                      <div>
449                        <p class="text-xs font-semibold">Deepgram</p>
450                        <p class="text-[10px] text-[var(--color-muted)]">Nova · Pro</p>
451                      </div>
452                    </div>
453                  </div>
454
455                  <div class="provider-mock-item flex items-center justify-between rounded-xl border border-transparent px-3 py-2.5 opacity-80">
456                    <div class="flex items-center gap-2.5">
457                      <span class="flex h-7 w-7 items-center justify-center rounded-lg bg-zinc-100 font-mono text-[10px] font-bold text-zinc-600">11</span>
458                      <div>
459                        <p class="text-xs font-semibold">ElevenLabs</p>
460                        <p class="text-[10px] text-[var(--color-muted)]">Scribe · Pro</p>
461                      </div>
462                    </div>
463                  </div>
464                </div>
465
466                <div class="border-t border-black/6 bg-zinc-50/80 px-4 py-3">
467                  <p class="font-mono text-[10px] font-medium text-[var(--color-muted)]">API key</p>
468                  <div class="mt-1.5 flex items-center gap-2 rounded-lg border border-black/8 bg-white px-3 py-2">
469                    <span class="font-mono text-[11px] tracking-widest text-zinc-400">gsk_••••••••••••</span>
470                    <span class="ml-auto rounded bg-emerald-50 px-1.5 py-0.5 font-mono text-[9px] font-semibold text-emerald-700">local</span>
471                  </div>
472                </div>
473              </div>
474            </div>
475          </div>
476        </div>
477      </div>
478    </section>
479
480    <!-- Pricing -->
481    <section id="pricing" class="border-t border-black/5 bg-white section-pad">
482      <div class="mx-auto max-w-6xl px-5">
483        <div class="mx-auto mb-12 max-w-xl text-center">
484          <h2 class="text-3xl font-extrabold tracking-tight md:text-4xl">Start free. Upgrade once if you need more.</h2>
485          <p class="mt-3 text-[var(--color-muted)]">No monthly fee. Pro is a $19 lifetime unlock via ExtPay.</p>
486        </div>
487
488        <div class="mx-auto grid max-w-4xl gap-6 md:grid-cols-2">
489          <!-- Free -->
490          <article class="flex flex-col rounded-2xl border border-black/10 p-8">
491            <p class="font-mono text-sm font-semibold text-[var(--color-brand)]">Free</p>
492            <p class="mt-2 text-4xl font-extrabold tracking-tight">$0</p>
493            <p class="mt-1 text-sm text-[var(--color-muted)]">Forever — core workflow included</p>
494            <ul class="mt-6 flex flex-1 flex-col gap-3 text-sm">
495              <li class="flex gap-2"><span class="text-[var(--color-brand)]">✓</span> DOM picker + unlimited annotations</li>
496              <li class="flex gap-2"><span class="text-[var(--color-brand)]">✓</span> Groq transcription with your own API key</li>
497              <li class="flex gap-2"><span class="text-[var(--color-brand)]">✓</span> Markdown export to Cursor, Codex, Claude Code</li>
498              <li class="flex gap-2"><span class="text-[var(--color-muted)]">—</span> <span class="text-[var(--color-muted)]">MCP &amp; screenshots (Pro)</span></li>
499            </ul>
500            <a href="https://chromewebstore.google.com/detail/voicedom-%E2%80%94-the-voice-feed/bifembmpcmalfadielpfjonjkjdioacm" target="_blank" rel="noopener" data-fast-goal="add_to_chrome" data-fast-goal-location="pricing" class="btn-primary mt-8 w-full justify-center"><img src="chrome.svg" alt="" class="h-5 w-5 shrink-0" aria-hidden="true">Add to Chrome — free</a>
501          </article>
502
503          <!-- Pro -->
504          <article class="relative flex flex-col rounded-2xl border-2 border-[var(--color-brand)] bg-gradient-to-b from-orange-50/80 to-white p-8 shadow-lg shadow-orange-500/10">
505            <span class="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-[var(--color-brand)] px-3 py-0.5 font-mono text-xs font-semibold text-white">Most popular for teams</span>
506            <p class="font-mono text-sm font-semibold text-[var(--color-brand)]">Pro</p>
507            <p class="mt-2 text-4xl font-extrabold tracking-tight">$19 <span class="text-lg font-semibold text-[var(--color-muted)]">lifetime</span></p>
508            <p class="mt-1 text-sm text-[var(--color-muted)]">One-time purchase — no recurring charges</p>
509            <ul class="mt-6 flex flex-1 flex-col gap-3 text-sm">
510              <li class="flex gap-2"><span class="text-[var(--color-brand)]">✓</span> Everything in Free</li>
511              <li class="flex gap-2"><span class="text-[var(--color-brand)]">✓</span> MCP server — agents read annotations live</li>
512              <li class="flex gap-2"><span class="text-[var(--color-brand)]">✓</span> BYOK for all transcription providers</li>
513              <li class="flex gap-2"><span class="text-[var(--color-brand)]">✓</span> Element screenshots in exports</li>
514            </ul>
515            <a href="https://chromewebstore.google.com/detail/voicedom-%E2%80%94-the-voice-feed/bifembmpcmalfadielpfjonjkjdioacm" target="_blank" rel="noopener" data-fast-goal="get_pro_click" data-fast-goal-location="pricing" class="mt-8 inl
515ine-flex w-full items-center justify-center rounded-full bg-[var(--color-ink)] px-6 py-3.5 text-base font-semibold text-white transition hover:bg-zinc-800">Get Pro — $19 lifetime</a>
516            <p class="mt-3 text-center text-xs text-[var(--color-muted)]">Unlock inside the extension after install</p>
517          </article>
518        </div>
519      </div>
520    </section>
521
522    <!-- FAQ -->
523    <section id="faq" class="section-pad">
524      <div class="mx-auto max-w-3xl px-5">
525        <h2 class="mb-10 text-center text-3xl font-extrabold tracking-tight">Common questions</h2>
526        <div class="flex flex-col gap-4">
527          <details class="rounded-xl border border-black/8 bg-white p-5" open>
528            <summary class="flex items-center justify-between font-semibold">
529              Is this only for voice notes?
530              <span class="ml-4 text-[var(--color-muted)]">+</span>
531            </summary>
532            <p class="mt-3 text-sm text-[var(--color-muted)]">No. Voice is the input — the output is clean transcription linked to exact UI elements for fast AI handoff.</p>
533          </details>
534          <details class="rounded-xl border border-black/8 bg-white p-5">
535            <summary class="flex items-center justify-between font-semibold">
536              Which AI tools does it work with?
537              <span class="ml-4 text-[var(--color-muted)]">+</span>
538            </summary>
539            <p class="mt-3 text-sm text-[var(--color-muted)]">Any tool that accepts text context: Cursor, Codex, Claude Code, and more. Paste markdown or use MCP in Pro.</p>
540          </details>
541          <details class="rounded-xl border border-black/8 bg-white p-5">
542            <summary class="flex items-center justify-between font-semibold">
543              Where are annotations and keys stored?
544              <span class="ml-4 text-[var(--color-muted)]">+</span>
545            </summary>
546            <p class="mt-3 text-sm text-[var(--color-muted)]">Locally in your browser profile, grouped per hostname. Nothing leaves your machine unless you export it.</p>
547          </details>
548          <details class="rounded-xl border border-black/8 bg-white p-5">
549            <summary class="flex items-center justify-between font-semibold">
550              Does it work on dynamic web apps?
551              <span class="ml-4 text-[var(--color-muted)]">+</span>
552            </summary>
553            <p class="mt-3 text-sm text-[var(--color-muted)]">Yes. Built for SPAs and modern frameworks with non-destructive highlighting and React fiber detection.</p>
554          </details>
555          <details class="rounded-xl border border-black/8 bg-white p-5">
556            <summary class="flex items-center justify-between font-semibold">
557              What if transcription fails?
558              <span class="ml-4 text-[var(--color-muted)]">+</span>
559            </summary>
560            <p class="mt-3 text-sm text-[var(--color-muted)]">Retry immediately or switch provider in settings. Your saved annotations remain either way.</p>
561          </details>
562          <details class="rounded-xl border border-black/8 bg-white p-5">
563            <summary class="flex items-center justify-between font-semibold">
564              Do I need a subscription for Pro?
565              <span class="ml-4 text-[var(--color-muted)]">+</span>
566            </summary>
567            <p class="mt-3 text-sm text-[var(--color-muted)]">No. Pro is a one-time $19 lifetime purchase. Free tier has no time limit.</p>
568          </details>
569        </div>
570      </div>
571    </section>
572
573    <!-- Final CTA -->
574    <section class="section-pad pb-24 pt-0">
575      <div class="mx-auto max-w-4xl px-5">
576        <div class="rounded-3xl border border-[var(--color-brand)]/25 bg-gradient-to-br from-orange-50 to-orange-100/50 p-10 text-center md:p-14">
577          <h2 class="text-3xl font-extrabold tracking-tight md:text-4xl">Point. Speak. Transcribe. Ship.</h2>
578          <p class="mx-auto mt-3 max-w-md text-[var(--color-muted)]">Turn UI feedback into agent-ready instructions in seconds.</p>
579          <div class="mt-8 flex flex-wrap items-center justify-center gap-3">
580            <a href="https://chromewebstore.google.com/detail/voicedom-%E2%80%94-the-voice-feed/bifembmpcmalfadielpfjonjkjdioacm" target="_blank" rel="noopener" data-fast-goal="add_to_chrome" data-fast-goal-location="final-cta" class="btn-primary text-lg"><img src="chrome.svg" alt="" class="h-5 w-5 shrink-0" aria-hidden="true">Add to Chrome — free</a>
581            <a href="#pricing" class="btn-secondary">Compare Free vs Pro</a>
582          </div>
583        </div>
584      </div>
585    </section>
586
587  </main>
588
589  <footer class="border-t border-black/5 py-8">
590    <div class="mx-auto flex max-w-6xl flex-col items-center justify-between gap-4 px-5 text-sm text-[var(--color-muted)] sm:flex-row">
591      <img src="voice-DOM-logo.png" alt="VoiceDOM" class="h-5 w-auto opacity-70">
592      <p>Voice-first UI annotations for AI coding agents</p>
593      <nav class="flex items-center gap-4">
594        <a href="/mcp" class="hover:text-[var(--color-ink)]">MCP</a>
595        <a href="/help" class="hover:text-[var(--color-ink)]">Help</a>
596        <a href="/privacy" class="hover:text-[var(--color-ink)]">Privacy</a>
597        <a href="/terms" class="hover:text-[var(--color-ink)]">Terms</a>
598        <a href="/faqs" class="hover:text-[var(--color-ink)]">FAQs</a>
599      </nav>
600    </div>
601  </footer>
602
603  <!-- Demo lightbox -->
604  <div
605    id="demo-modal"
606    class="fixed inset-0 z-[100] items-center justify-center bg-black/90 p-4 backdrop-blur-sm md:p-8"
607    role="dialog"
608    aria-modal="true"
609    aria-label="VoiceDOM demo video"
610    aria-hidden="true"
611  >
612    <button
613      type="button"
614      id="demo-modal-close"
615      class="absolute right-4 top-4 flex h-11 w-11 items-center justify-center rounded-full bg-white/10 text-white transition hover:bg-white/20 focu
615s-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white md:right-8 md:top-8"
616      aria-label="Close demo"
617    >
618      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
619        <path d="M18 6 6 18"/><path d="m6 6 12 12"/>
620      </svg>
621    </button>
622    <div class="w-full max-w-[min(96vw,1546px)]">
623      <video
624        id="demo-modal-video"
625        class="max-h-[88vh] w-full rounded-xl shadow-2xl"
626        src="demo-video.mp4"
627        width="1546"
628        height="1080"
629        controls
630        playsinline
631        preload="metadata"
632      ></video>
633    </div>
634  </div>
635
636  
636<script>
637    (function () {
638      const modal = document.getElementById('demo-modal');
639      const modalVideo = document.getElementById('demo-modal-video');
640      const previewVideo = document.getElementById('demo-preview');
641      const closeBtn = document.getElementById('demo-modal-close');
642      const openTriggers = document.querySelectorAll('[data-demo-open]');
643      let lastFocus = null;
644
645      function openDemo() {
646        lastFocus = document.activeElement;
647        modal.classList.add('is-open');
648        modal.setAttribute('aria-hidden', 'false');
649        document.body.style.overflow = 'hidden';
650        previewVideo?.pause();
651        modalVideo.currentTime = 0;
652        modalVideo.muted = false;
653        modalVideo.play().catch(function () {});
654        closeBtn.focus();
655      }
656
657      function closeDemo() {
658        modal.classList.remove('is-open');
659        modal.setAttribute('aria-hidden', 'true');
660        document.body.style.overflow = '';
661        modalVideo.pause();
662        modalVideo.currentTime = 0;
663        previewVideo?.play().catch(function () {});
664        if (lastFocus && typeof lastFocus.focus === 'function') lastFocus.focus();
665      }
666
667      openTriggers.forEach(function (trigger) {
668        trigger.addEventListener('click', function (event) {
669          event.preventDefault();
670          openDemo();
671        });
672      });
673
674      closeBtn.addEventListener('click', closeDemo);
675
676      modal.addEventListener('click', function (event) {
677        if (event.target === modal) closeDemo();
678      });
679
680      document.addEventListener('keydown', function (event) {
681        if (event.key === 'Escape' && modal.classList.contains('is-open')) closeDemo();
682      });
683    })();
684  </script>
684
685
686</body>
687</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.