KQ-842 · READ/WAVE

Read Wave

A sent message with a row of reader discs beneath it. Each new reader slides in from below on snap and tucks into the overlapping tail while the "Seen by" count rolls its digits on the same spring; hovering, focusing, or pressing the row fans the discs apart with a layout FLIP on snap and unfolds a list of names and times whose measured height glides. The row is a button with aria-expanded named by the count, Escape folds it, and a status region speaks each arrival once.

KQ-842 · READ/WAVE

Fieldline 2.4 ships at 16:00. Objections before 15:30, please.
14:58

Seen by 2 of 5 · last Rui 15:04

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/read-wave

Props

text: string; default —; The message body.
time: string; default —; When it was sent, printed under the bubble.
readers: ReadReader[]; default —; Everyone who has read it, in read order: id, name, a formatted time, and optional initials (derived from the name when omitted). Append as people read.
total: number; default —; People who could read it; the count then reads "Seen by 3 of 5".
maxAvatars: number; default 5; Discs shown before the rest collapse into a "+N" pip whose number also rolls.
open / defaultOpen: boolean; default false; Controlled or initial pinned state of the fan; hover and focus open it on their own.
onOpenChange: (open: boolean) => void; default —; Fires when a press or Escape pins or unpins the fan.
label: string; default "Thread"; Names the thread list for assistive technology.

Prop	Type	Default	Description
text	string	—	The message body.
time	string	—	When it was sent, printed under the bubble.
readers	ReadReader[]	—	Everyone who has read it, in read order: id, name, a formatted time, and optional initials (derived from the name when omitted). Append as people read.
total	number	—	People who could read it; the count then reads "Seen by 3 of 5".
maxAvatars	number	5	Discs shown before the rest collapse into a "+N" pip whose number also rolls.
open / defaultOpen	boolean	false	Controlled or initial pinned state of the fan; hover and focus open it on their own.
onOpenChange	(open: boolean) => void	—	Fires when a press or Escape pins or unpins the fan.
label	string	"Thread"	Names the thread list for assistive technology.