Read-aloud

At any moment during playback, exactly one sentence is the active sentence. It's highlighted with a quiet, non-distracting tint. A small left-border accent runs along it. The cursor of attention is the sentence, not the word — words pass too quickly for the eye to track meaningfully, and anything finer than a sentence fights with reading comprehension.

Click any sentence and playback restarts from there. Pause and the highlight stays, so the user can glance away and come back. Resume and the voice picks up at the start of the active sentence, not mid-word.

When a product reads its output aloud, the user's trust is running on two surfaces at once: the words on screen and the words in their ears. If those two surfaces drift — because the voice is faster, because the voice skips a sentence the text shows — the user loses track of which one is authoritative. The visible transcript has to be the source of truth. Always.

This is also a reason to clearly label the voice as synthetic. Users can tell, but naming it removes the small doubt, especially on mobile.

• 01Four pace presets, not a slider. 0.9x, 1x, 1.25x, 1.5x. A continuous slider asks users to calibrate. Four presets give them a decision.
• 02Sentence is the atom. Do not animate word-by-word. It looks impressive for five seconds and becomes exhausting to read under. The sentence is the unit of human listening comprehension.
• 03Pause leaves the cursor in place. Coming back to a paused track should start at the top of the current sentence, not where the audio was cut. Nobody wants to hear "— and that's the third point" as their resume.

The most common implementation bug is that the voice pulls ahead of the highlight by a word or two — latency between the audio thread and the render thread. Users register it as confusion, not as a bug. Always tune the sync so the highlight leads by a hair. A user who's looking slightly ahead of the voice feels in command. A user who's looking slightly behind feels behind.