23 Voice-FirstBuild guide

Guide route

How the Voice-First site was built.

This route documents the brief, asset pipeline, evidence labels, implementation choices, and critique loop for variation 23.

Brief

Build a distinct static site under the voice-first metaphor: minimized visuals, waveform motion, long-form captions, and a simulated microphone control. Proof must be narrated and captioned; fake voice synthesis must be labeled concept.

The interaction model is aided reading: narration supports comprehension but is never the only path. Every proof claim is captioned before it is played.

Evidence labels

Real

Verified work, live integrations, documented clients or documented implementation.

Concept

Fiction labeled fiction. Speculative ideas, unbuilt features, illustrative scenarios.

Built demo

A working interface or demo without client contracts or live data.

Asset pipeline

The site uses pure CSS/HTML waveforms and caption blocks. No external audio files are used; narration is simulated with transcript prompts unless connected to a later synthesis pass.

  • Waveform: CSS animated bars with reduced-motion fallback.
  • Captions: semantic elements with aria-live regions for dynamic updates.
  • Proof tags: semantic HTML with ARIA roles and no falsified social proof.
  • Media: no silent video; motion is present only to support narration.

Implementation choices

  • Static HTML/CSS/JS under sites/23/.
  • One H1 per route; no hidden headings.
  • Responsive via clamp(), stacked layouts, and reduced-motion media query.
  • Simulated voice controls via keyboard/click paths; nothing required for access.
  • Guide route documents critique passes and future iterations.

Critique passes

  1. Pass 1: Structure and label audit complete. Homepage exposes proof tier chips, narrative cards, and captioned statements across real, concept, and built demo.
  2. Pass 2: Responsive and reduced-motion pass checked. Narrative stack becomes single column; waveform animation disables safely.
  3. Pass 3: Live static verification. Home, stylesheet, script, and guide all return healthy status with no broken internal links.