index.html

{{ define "main" }}
{{- $p := hugo.Data.product -}}

<section class="hero" id="top" aria-labelledby="hero-title">
    <div class="shell hero-inner">
        <div class="hero-copy">
            <p class="section-tag">native macOS voice typing</p>
            <h1 id="hero-title">Say it once.<br><em>Your Mac types.</em></h1>
            <p class="hero-lede">VocaMac listens when you ask, transcribes on your Mac, and puts the words at your cursor. No account. Open source. Built for Apple Silicon.</p>
            <div class="hero-actions">
                <a class="btn btn-primary" href="#install">Get VocaMac <span class="btn-arrow btn-arrow-down" aria-hidden="true">↓</span></a>
                <a class="btn btn-secondary" href="{{ $p.links.repo }}">View the source <span class="btn-arrow" aria-hidden="true">↗</span></a>
            </div>
        <div class="hero-proof">
                <span>{{ $p.requirements.osShort }}</span>
                <span>{{ $p.requirements.arch }}</span>
                <span>{{ $p.stable.status }} · {{ $p.stable.tag }}</span>
                <span>{{ $p.license.id }}</span>
            </div>
        </div>

        <div class="workbench" role="img" aria-label="A VocaMac recording and text insertion preview">
            <div class="menubar">
                <img class="menubar-mark" src="/brand/voca-mark-white.svg" alt="" width="15" height="18">
                <span>VocaMac</span>
                <span class="menubar-status"><i class="rec-dot" aria-hidden="true"></i> recording</span>
            </div>
            <div class="window">
                <div class="window-bar">
                    <i class="window-dot window-dot-red" aria-hidden="true"></i>
                    <i class="window-dot window-dot-yellow" aria-hidden="true"></i>
                    <i class="window-dot window-dot-green" aria-hidden="true"></i>
                    <span class="window-title">VocaMac · menu bar</span>
                </div>
                <div class="window-body">
                    <div class="workbench-header">
                        <div>
                            <strong>Ready to dictate</strong>
                            <span class="workbench-hint">Hold Right Option to record</span>
                        </div>
                        <span class="status-badge"><i aria-hidden="true"></i> local</span>
                    </div>
                    <div class="waveform" aria-hidden="true">
                        {{ range seq 42 }}<i></i>{{ end }}
                    </div>
                    <div class="editor-line">
                        {{/* Space between words only, never after the last one, so the caret sits against the text. */}}
                        <span class="editor-text">{{ range $i, $word := split "VocaMac puts the words where I am already working" " " }}{{ if $i }} {{ end }}<span>{{ $word }}</span>{{ end }}</span><i class="caret" aria-hidden="true"></i>
                    </div>
                    <div class="workbench-meta">
                        <span class="chip">model: {{ $p.engine.name }}</span>
                        <span class="chip">audio stays on Mac</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section story-section" id="how-it-works" aria-labelledby="how-title">
    <div class="shell">
        <div class="section-head">
            <p class="section-tag">how it works</p>
            <h2 class="section-title" id="how-title">A small loop that stays out of the way.</h2>
            <p class="section-lede">VocaMac lives in the menu bar, so dictation starts where your work already is.</p>
        </div>
        <div class="steps">
            <article class="step reveal">
                <span class="card-icon">{{ partial "icon.html" "hotkey" }}</span>
                <span class="step-index">01 / trigger</span>
                <h3>Hold a hotkey</h3>
                <p>Use the configured shortcut or toggle mode. A clear menu-bar state tells you when VocaMac is listening.</p>
                <p class="step-note">Microphone + Input Monitoring permissions keep the control system-wide.</p>
            </article>
            <article class="step reveal">
                <span class="card-icon">{{ partial "icon.html" "mic" }}</span>
                <span class="step-index">02 / speak</span>
                <h3>Say what you mean</h3>
                <p>Audio is captured in memory and passed to the speech-to-text model selected in Settings.</p>
                <p class="step-note">Choose a language hint when automatic detection needs help.</p>
            </article>
            <article class="step reveal">
                <span class="card-icon">{{ partial "icon.html" "caret" }}</span>
                <span class="step-index">03 / insert</span>
                <h3>Keep working</h3>
                <p>When recording ends, the transcript is inserted at the cursor through macOS accessibility APIs.</p>
                <p class="step-note">Some secure fields and apps can restrict system text insertion.</p>
            </article>
        </div>
    </div>
</section>

<section class="section models-section" id="models" aria-labelledby="models-title">
    <div class="shell">
        <div class="models-layout">
            <div>
                <p class="section-tag">choose your model</p>
                <h2 class="section-title" id="models-title">The model is a setting, not a mystery.</h2>
                <p class="section-lede">{{ $p.stable.tag }} includes WhisperKit with {{ $p.engine.runtime }} acceleration plus Parakeet, Apple Speech, and specialized ONNX models. VocaMac keeps model choice local, visible, and reversible.</p>
                <div class="note">
                    <h3>First download</h3>
                    <p>Models download from <a href="{{ $p.engine.modelRepoURL }}">{{ $p.engine.modelRepo }}</a> and are cached locally. After a model is available, transcription can run without sending audio to a cloud service.</p>
                </div>
                <div class="note">
                    <h3>More than Whisper</h3>
                    <p>{{ $p.stable.tag }} brings the engines and models in the second table into the shipping release. Check the <a href="{{ $p.stable.releaseURL }}">release notes</a> for their language and macOS requirements.</p>
                </div>
            </div>
            <div>
                <div class="table-scroll">
                    <table class="model-table">
                        <caption>WhisperKit models available in {{ $p.stable.tag }}</caption>
                        <thead>
                            <tr><th scope="col">Model</th><th scope="col">Download</th><th scope="col">RAM</th><th scope="col">Character</th></tr>
                        </thead>
                        <tbody>
                            {{ range $p.models }}
                            <tr>
                                <th scope="row">{{ .name }}</th>
                                <td>{{ .size }}</td>
                                <td>{{ .ram }}</td>
                                <td class="model-note">{{ .note }}</td>
                            </tr>
                            {{ end }}
                        </tbody>
                    </table>
                </div>
                <div class="table-scroll table-scroll-nightly">
                    <table class="model-table">
                        <caption>Additional engines and models available in {{ $p.stable.tag }}</caption>
                        <thead>
                            <tr><th scope="col">Model</th><th scope="col">Engine</th><th scope="col">Download</th><th scope="col">Note</th></tr>
                        </thead>
                        <tbody>
                            {{ range $p.releaseModels }}
                            <tr>
                                <th scope="row">{{ .name }}</th>
                                <td>{{ .engine }}</td>
                                <td>{{ .size }}</td>
                                <td class="model-note">{{ .note }}</td>
                            </tr>
                            {{ end }}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section proof-section" id="proof" aria-labelledby="proof-title">
    <div class="shell">
        <div class="section-head">
            <p class="section-tag">real product states</p>
            <h2 class="section-title" id="proof-title">A Mac app you can actually see working.</h2>
            <p class="section-lede">VocaMac is a menu-bar tool, not a dashboard pretending to be one. These are the states that matter while you dictate.</p>
        </div>
        <div class="proof-grid">
            <figure class="shot reveal">
                <img src="/screenshots/popover-panel.png" alt="VocaMac menu-bar popover showing ready status and the last transcription" width="852" height="508" loading="lazy">
                <figcaption><strong>The quiet center</strong>Open the popover to check status, model, and the last transcript.</figcaption>
            </figure>
            <figure class="shot reveal">
                <img src="/screenshots/settings-models.png" alt="VocaMac Settings Models tab showing model management and system information" width="1344" height="1260" loading="lazy">
                <figcaption><strong>Choose your balance</strong>Download and switch between local models from Settings.</figcaption>
            </figure>
            <figure class="shot reveal">
                <img src="/screenshots/cursor-indicator.png" alt="VocaMac recording indicator floating near a text cursor" width="1217" height="990" loading="lazy">
                <figcaption><strong>Know when it is listening</strong>An optional cursor indicator keeps recording state visible without taking over your screen.</figcaption>
            </figure>
        </div>
        <p class="section-link"><a href="/screenshots/">See the full screenshot gallery <span class="btn-arrow" aria-hidden="true">→</span></a></p>
    </div>
</section>

<section class="section privacy" id="privacy" aria-labelledby="privacy-title">
    <div class="shell">
        <div class="section-head">
            <p class="section-tag">a precise privacy promise</p>
            <h2 class="section-title" id="privacy-title">Your voice has a path.<br>We show you which one.</h2>
            <p class="section-lede">VocaMac does not need a Voca cloud service to transcribe. The important boundary is the model running on your Mac.</p>
        </div>

        <ol class="route">
            <li class="route-step">
                <div class="route-node">
                    <span class="route-icon">{{ partial "icon.html" "mic" }}</span>
                    <span class="route-name">Microphone</span>
                    <span class="route-sub">You hold the hotkey</span>
                </div>
                <svg class="route-link" width="56" height="24" viewBox="0 0 56 24" aria-hidden="true"><path class="route-track" d="M2 12h48"/><path class="route-pulse" d="M2 12h48"/><path class="route-head" d="M46 7.5 50.5 12 46 16.5"/></svg>
            </li>
            <li class="route-step">
                <div class="route-node">
                    <span class="route-icon">{{ partial "icon.html" "memory" }}</span>
                    <span class="route-name">In-memory audio</span>
                    <span class="route-sub">Held for the recording</span>
                </div>
                <svg class="route-link" width="56" height="24" viewBox="0 0 56 24" aria-hidden="true"><path class="route-track" d="M2 12h48"/><path class="route-pulse" d="M2 12h48"/><path class="route-head" d="M46 7.5 50.5 12 46 16.5"/></svg>
            </li>
            <li class="route-step">
                <div class="route-node">
                    <span class="route-icon">{{ partial "icon.html" "chip" }}</span>
                    <span class="route-name">Selected on-device engine</span>
                    <span class="route-sub">WhisperKit/CoreML, Parakeet, Apple Speech, ONNX</span>
                </div>
                <svg class="route-link" width="56" height="24" viewBox="0 0 56 24" aria-hidden="true"><path class="route-track" d="M2 12h48"/><path class="route-pulse" d="M2 12h48"/><path class="route-head" d="M46 7.5 50.5 12 46 16.5"/></svg>
            </li>
            <li class="route-step">
                <div class="route-node">
                    <span class="route-icon">{{ partial "icon.html" "caret" }}</span>
                    <span class="route-name">Transcript at cursor</span>
                    <span class="route-sub">Where you were typing</span>
                </div>
            </li>
        </ol>

        <p class="route-negative">
            <span class="route-negative-icon">{{ partial "icon.html" "cloud-off" }}</span>
            <span><strong>There is no extra stop.</strong> The path above has no Voca speech server in it. Dictation audio is not uploaded for transcription.</span>
        </p>

        <div class="boundaries">
            <article class="boundary reveal"><span class="card-icon">{{ partial "icon.html" "lock" }}</span><h3>What stays local</h3><p>During transcription, your audio and the selected model stay on the Mac. VocaMac has no Voca-hosted speech endpoint.</p></article>
            <article class="boundary reveal"><span class="card-icon">{{ partial "icon.html" "globe" }}</span><h3>What uses a network</h3><p>Initial model downloads, release downloads, and the app's update check use their documented sources. Apple may manage language assets for system speech.</p></article>
            <article class="boundary reveal"><span class="card-icon">{{ partial "icon.html" "code" }}</span><h3>What you can inspect</h3><p>The application is open source under {{ $p.license.id }}. Preferences, local model management, and the injection path are visible in the repository.</p></article>
        </div>
    </div>
</section>

<section class="section configuration" id="configuration" aria-labelledby="configuration-title">
    <div class="shell">
        <div class="section-head">
            <p class="section-tag">a focused tool, with real controls</p>
            <h2 class="section-title" id="configuration-title">Make the small details yours.</h2>
            <p class="section-lede">VocaMac keeps its surface compact while giving you control over the parts that change daily use.</p>
        </div>
        <div class="config-grid">
            <article class="config-item reveal"><span class="card-icon">{{ partial "icon.html" "hotkey" }}</span><h3>Hotkeys and modes</h3><p>Choose push-to-talk or double-tap toggle, then keep a shortcut that fits your hands.</p><a href="/features/push-to-talk/">Explore activation <span class="btn-arrow" aria-hidden="true">→</span></a></article>
            <article class="config-item reveal"><span class="card-icon">{{ partial "icon.html" "chip" }}</span><h3>Models and language</h3><p>Pick a local model and let it follow automatic language detection or a language hint.</p><a href="/features/smart-model-selection/">Explore model choice <span class="btn-arrow" aria-hidden="true">→</span></a></article>
            <article class="config-item reveal"><span class="card-icon">{{ partial "icon.html" "levels" }}</span><h3>Microphone and feedback</h3><p>Choose the input device and use menu-bar, audio-level, or cursor feedback when you need it.</p><a href="/features/visual-feedback/">Explore feedback <span class="btn-arrow" aria-hidden="true">→</span></a></article>
            <article class="config-item reveal"><span class="card-icon">{{ partial "icon.html" "vocabulary" }}</span><h3>Your vocabulary</h3><p>Add names and terms that matter to you. Custom vocabulary is processed with the Whisper path.</p><a href="/features/custom-vocabulary/">Explore vocabulary <span class="btn-arrow" aria-hidden="true">→</span></a></article>
        </div>
    </div>
</section>

<section class="section install-section" id="install" aria-labelledby="install-title">
    <div class="shell">
        <div class="section-head">
            <p class="section-tag">{{ $p.stable.status }} · {{ $p.stable.tag }}</p>
            <h2 class="section-title" id="install-title">Pick your way in.</h2>
            <p class="section-lede">The signed release is ready for {{ $p.requirements.osShort }} and {{ $p.requirements.arch }}. A first model download may need an internet connection.</p>
        </div>
        <div class="install-grid">
            <article class="install-card install-card-primary reveal">
                <span class="card-icon">{{ partial "icon.html" "terminal" }}</span>
                <span class="install-label">recommended / Homebrew</span>
                <h3>Install from the tap</h3>
                <p>Use the cask when you want upgrades to fit into your normal Mac workflow.</p>
                <div class="code-block" data-copy>
                    <pre><code><span class="prompt">$ </span>brew tap vocahq/vocamac
<span class="prompt">$ </span>brew trust vocahq/vocamac
<span class="prompt">$ </span>brew install --cask vocamac</code></pre>
                </div>
                <p class="install-detail">Updates: <code>{{ $p.brew.upgrade }}</code></p>
                <a class="text-link" href="{{ $p.links.homebrewDoc }}">Read the Homebrew guide <span class="btn-arrow" aria-hidden="true">↗</span></a>
            </article>
            <article class="install-card reveal">
                <span class="card-icon">{{ partial "icon.html" "download" }}</span>
                <span class="install-label">no terminal required / DMG</span>
                <h3>Download the signed app</h3>
                <p>Open the latest DMG, drag VocaMac to Applications, and launch it from Spotlight.</p>
                <a class="btn btn-primary" href="{{ $p.stable.dmgURL }}">Download {{ $p.stable.tag }} DMG <span class="btn-arrow btn-arrow-down" aria-hidden="true">↓</span></a>
                <p class="install-detail">{{ $p.stable.dmg }} · {{ $p.stable.dmgSize }} · {{ $p.requirements.signing }}</p>
                <a class="text-link" href="{{ $p.stable.releasesURL }}">See releases and checksums <span class="btn-arrow" aria-hidden="true">↗</span></a>
            </article>
        </div>
        <details class="source-install">
            <summary>Build from source</summary>
            <p>For contributors and people who prefer to build locally. Ad-hoc builds may require permissions again after a rebuild.</p>
            <div class="code-block" data-copy>
                <pre><code><span class="prompt">$ </span>git clone {{ $p.links.repo }}.git
<span class="prompt">$ </span>cd vocamac
<span class="prompt">$ </span>make install</code></pre>
            </div>
            <a class="text-link" href="{{ $p.links.repo }}/blob/main/README.md#quick-start">Read the build notes <span class="btn-arrow" aria-hidden="true">↗</span></a>
        </details>
        <dl class="requirements">
            <div class="requirement"><dt>System</dt><dd>{{ $p.requirements.os }}</dd></div>
            <div class="requirement"><dt>Hardware</dt><dd>{{ $p.requirements.archNote }}</dd></div>
            <div class="requirement"><dt>Permissions</dt><dd>{{ delimit $p.requirements.permissions ", " }}</dd></div>
            <div class="requirement"><dt>License</dt><dd>{{ $p.license.name }}</dd></div>
        </dl>
    </div>
</section>

<section class="section open-source" id="open-source" aria-labelledby="open-title">
    <div class="shell oss-layout">
        <div>
            <p class="section-tag">open source by default</p>
            <h2 class="section-title" id="open-title">A small Mac utility with nothing to hide.</h2>
            <p class="section-lede">Read the source, inspect the release, or help shape the next build. VocaMac is part of the wider Voca family of native tools.</p>
            <div class="oss-links"><a href="{{ $p.links.repo }}">Source on GitHub <span class="btn-arrow" aria-hidden="true">↗</span></a><a href="{{ $p.links.issues }}">Issues and ideas <span class="btn-arrow" aria-hidden="true">↗</span></a><a href="{{ $p.links.license }}">{{ $p.license.id }} <span class="btn-arrow" aria-hidden="true">↗</span></a></div>
        </div>
        <a class="family-link" href="{{ $p.links.vocahq }}"><img src="/brand/voca-logo.svg" alt="" width="22" height="22"> Explore the Voca family <span class="btn-arrow" aria-hidden="true">↗</span></a>
    </div>
</section>

<section class="section faq-section" id="faq" aria-labelledby="faq-title">
    <div class="shell">
        <div class="section-head">
            <p class="section-tag">questions, answered plainly</p>
            <h2 class="section-title" id="faq-title">The useful bits before you install.</h2>
        </div>
        <div class="faq" data-faq>
            <details open><summary>Does my voice leave my Mac?</summary><p>During transcription, audio is passed to the selected local speech-to-text model on your Mac. VocaMac does not send dictation audio to a Voca cloud service. Model downloads and update checks are separate network actions.</p></details>
            <details><summary>Do I need internet access?</summary><p>You need internet access to download the app or a model that is not on your Mac yet. After the model is available, on-device transcription can work offline. VocaMac may still check GitHub for application updates when that feature is enabled.</p></details>
            <details><summary>Which Macs can run VocaMac?</summary><p>The current release supports {{ $p.requirements.os }} on {{ $p.requirements.arch }}. Intel Macs are not supported by the released arm64 build.</p></details>
            <details><summary>Why does VocaMac need permissions?</summary><p>Microphone access captures speech. Accessibility and Input Monitoring let the menu-bar app hear its configured shortcut and insert the resulting text into the app where you are working. Secure fields and individual apps can still restrict insertion.</p></details>
            <details><summary>Which model should I choose?</summary><p>Start with Small on an 8 GB Mac, then choose a compact Large or Distil variant when accuracy matters and your Mac has the headroom. Tiny and Base are useful when a smaller download or lower memory use matters more.</p></details>
            <details><summary>What is available beyond Whisper?</summary><p>{{ $p.stable.tag }} includes Parakeet (NVIDIA TDT models on the Apple Neural Engine), Apple Speech (the macOS 26+ system engine), and sherpa-onnx (CPU-only specialized models: Moonshine, SenseVoice, GigaAM v3, and Canary 180M Flash). See the model table above and the release notes for language and macOS requirements.</p></details>
        </div>
    </div>
</section>

<section class="final-cta" aria-labelledby="final-title">
    <div class="shell">
        <p class="section-tag">ready when you are</p>
        <h2 id="final-title">Let your voice stay close to the work.</h2>
        <p>Install VocaMac, choose a model, and put the words where your cursor already is.</p>
        <div class="hero-actions"><a class="btn btn-primary" href="#install">Get VocaMac <span class="btn-arrow btn-arrow-down" aria-hidden="true">↓</span></a><a class="btn btn-secondary" href="/screenshots/">See the product <span class="btn-arrow" aria-hidden="true">→</span></a></div>
        <div class="hero-proof"><span>{{ $p.requirements.osShort }}</span><span>{{ $p.requirements.arch }}</span><span>{{ $p.license.id }}</span></div>
    </div>
</section>
{{ end }}