Read along

A highlight follows the reading, word by word.

Reading is easier when something gently keeps your place, one word at a time.

Installation

$ npx shadcn@latest add @textlab/read-along

Needs @textlab in your components.json. Setup takes a minute.

Usage

usage.tsx

import { ReadAlong } from "@/components/textlab/read-along/read-along";

<ReadAlong text="Reading is easier when something keeps your place." variant="karaoke" />

Variants

highlightkaraoke

Props

Prop	Type	Default	Description
text*	string	–	The copy.
variant	"highlight" \| "karaoke"	"highlight"	A selection box that hops word to word, or a color fill through each word.
wpm	number	220	Reading pace in words per minute.
color	string	var(--tl-accent)	Highlight or fill color.
loop	boolean	true	Start over after a pause at the end.
as	ElementType	"p"	Rendered element.
reducedMotion	"user" \| "always" \| "never"	"user"	user follows the OS setting; always shows the still version.
className	string	–	Merged onto the root.

When to use it

Reach for it

Audio and text-to-speech products.
Language learning, lyrics and accessibility demos.

Skip it

Long articles; the pace is fixed.
As a substitute for real synced captions.

Accessibility

The paragraph is read once from a hidden copy.
The highlight pauses when the paragraph leaves the viewport.

Motion

The selection box glides between words in 200 ms with a strong ease-out, moved and stretched by one transform.
Longer words and punctuation get extra time, like natural reading.

Reduced motion. Plain paragraph, no highlight.

Performance

One timer and one moving box; word boxes are read once per step.