Skip to main content

GlyphFlow documentation

GlyphFlow is a TypeScript library that speaks text with the Web Speech API and fills each caption word from left to right as it is spoken.

Get startedRead the API

What it gives you​

A continuous text wipe​

Each word fills from left to right with a CSS gradient. It is not a whole-word color toggle and it does not split text into individual character elements.

Browser-native speech​

It uses window.speechSynthesis. There are no audio files, servers, external models, storage, or analytics.

Timing that improves as it speaks​

Word-boundary events provide observed timings. Between boundaries, GlyphFlow predicts motion and updates later predictions from actual measurements.

Quick start​

npm install @enumura/glyphflow
import { createKaraokeNarrator } from "@enumura/glyphflow";

const narrator = createKaraokeNarrator({
  text: "This is a caption.",
  target: document.querySelector("#caption")!,
  rate: 1,
});
narrator.speak();

The library renders its own spans inside target, and the package import includes the default CSS. Override colors and typography in your application stylesheet.

.kn-word {
  --kn-highlight-color: #f3f7ff;
  --kn-unhighlight-color: #475061;
  font-size: clamp(2rem, 6vw, 5rem);
}

Is GlyphFlow a fit?​

Use it for browser experiences that narrate English text and need a visual reading cue: accessibility aids, language-learning exercises, guided reading, product demos, and interactive captions.

GlyphFlow is designed for Chrome Desktop and English voices that emit word boundary events. It does not synchronize provided audio files or perform forced alignment. Voice availability and speech quality remain properties of the browser, OS, and selected voice.

Explore the docs​