KQ-934 · CATCHUP/SCROLL

Catchup Scroll

A catch-up control that reads the backlog to you at a stated pace: the run animates the box's own scrollTop imperatively across the words still to be read, linearly, because a reading speed that accelerates is a lie. Beside the thread a rail joins its fill on glide and marks a tick per message boundary, both measured from the rows themselves, and messages the rail has passed dim to read. Any touch stops it — a wheel, a pointer or a key inside the box — reported from the handler that caused it; Home and End jump to the top and the floor.

KQ-934 · CATCHUP/SCROLL

Ines Moreau, 01:48, unread.Gate is locked, all of it is on dock two.
Rui Baptista, 01:55, unread.Loader keys are on the hook by the office.
Marta Ferreira, 02:03, unread.I am off at three, Rui takes the handover.
Ines Moreau, 02:14, unread.Pallet 4471 is held, the yard fee has not cleared.
Rui Baptista, 02:16, unread.Paperwork is on the desk under the sheet.
Marta Ferreira, 02:31, unread.Dock three is free from nine if the yard needs it.
Ines Moreau, 02:40, unread.Depot closes Thursday from noon, nothing after eleven.
Rui Baptista, 02:52, unread.Yard lights are back on, the north run is clear.

stopped · 0 of 8 read

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/catchup-scroll

Props

messages: CatchupMessage[]; default —; The backlog, oldest first: id, author, time and text.
playing / defaultPlaying: boolean; default false; Controlled or initial run state.
onPlayingChange: (playing: boolean) => void; default —; Fires from the control, from an interruption, and from the finish.
onProgressChange: (readCount: number) => void; default —; Fires as the rail passes each message.
onFinish: () => void; default —; Fires once when the run reaches the floor.
onAnnounce: (sentence: string) => void; default —; The frozen sentence the polite region just spoke.
wordsPerMinute: number; default 220; Reading pace; sets how long the run takes.
label: string; default "Catch up"; Names the region and the control.
maxHeight: number; default 240; Scroll ceiling for the thread, in px.

Prop	Type	Default	Description
messages	CatchupMessage[]	—	The backlog, oldest first: id, author, time and text.
playing / defaultPlaying	boolean	false	Controlled or initial run state.
onPlayingChange	(playing: boolean) => void	—	Fires from the control, from an interruption, and from the finish.
onProgressChange	(readCount: number) => void	—	Fires as the rail passes each message.
onFinish	() => void	—	Fires once when the run reaches the floor.
onAnnounce	(sentence: string) => void	—	The frozen sentence the polite region just spoke.
wordsPerMinute	number	220	Reading pace; sets how long the run takes.
label	string	"Catch up"	Names the region and the control.
maxHeight	number	240	Scroll ceiling for the thread, in px.