Transcription Word Lock
Each spoken word lands dimmed under a dotted rule, then firms up to solid once the recognizer commits.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useRef, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Transcription Word Lock
*
* Speech landing in two stages: each word arrives tentative — dimmed,
* with a dotted underline — and firms up to solid a beat later, when theAbout this pattern
Live speech recognition revises itself constantly, and a transcript that hides this leaves the reader unsure which parts they can trust. Two states carry it: a tentative word is dim with a dotted rule beneath it, a committed one is solid with the rule gone. The tail of unsure words stays a constant few behind the write head, so the boundary between guess and record is always visible. Nothing moves — words that slid or scaled as they firmed up would be unreadable while they are being read, which is the only thing a transcript is for.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- AI assistant
Live meeting transcripts where recent speech is styled as provisional until it settles.
Related patterns
- Voice Waveform ListenBars rise and fall against the room while the microphone is open, so the mic reads as live.
- Streaming Code BlockGenerated code arrives line by line while the panel grows downward to fit it.
- Tool Call BadgeA badge announces the tool an agent is calling, turns while it runs, then settles into the result count.