KQ-1094 · OVERFLOW/GLIDE

Overflow Glide

A line cut to its box that, pointed at or tabbed to, glides left at reading speed until its last character reaches the edge, holds there, and eases home on the glide spring, which takes the pan's velocity, so a line let go mid-read slows, turns and returns. Speed is words per second, a word being five characters, and the ellipsis dissolves within its own width of travel while masked edges follow what is hidden on each side. It answers to the hover and keyboard focus of the link, button or row around it; on touch the first tap reads and the second acts.

KQ-1094 · OVERFLOW/GLIDE

Field reports

Fernworks shared drive

7 files

7 files · point at a name to read the rest

Open it on the Tactile stage

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/overflow-glide

Props

children: string; default —; The line. Cut to its box at rest; the rest glides into view when asked for.
speed: number; default 3; Reading pace in words per second, where a word is five characters, so a name with no spaces reads at the same pace as a sentence.
pause: number; default 0.8; Seconds held at the end of the line before it eases home.
fade: boolean; default true; Soft ramps at the cut edges, following how much text is hidden on each side, instead of hard edges.
loop: boolean; default false; Keep reading, again and again, while the line is pointed at or focused.
active: boolean; default —; Drive the glide from outside. Leave undefined and the line follows the hover and keyboard focus of the nearest link, button, option, tab, menu item, row or label around it, or its own.
onPhaseChange: (phase: "rest" | "reading" | "holding" | "returning") => void; default —; Reports each phase of the glide as it begins.
sound: boolean; default false; Play a soft swish as a glide starts. Nothing plays, and no audio context exists, unless this is on; a hover-born swish also waits for the page's first press.
className: string; default —; Merged onto the root element's classes.

Prop	Type	Default	Description
children	string	—	The line. Cut to its box at rest; the rest glides into view when asked for.
speed	number	3	Reading pace in words per second, where a word is five characters, so a name with no spaces reads at the same pace as a sentence.
pause	number	0.8	Seconds held at the end of the line before it eases home.
fade	boolean	true	Soft ramps at the cut edges, following how much text is hidden on each side, instead of hard edges.
loop	boolean	false	Keep reading, again and again, while the line is pointed at or focused.
active	boolean	—	Drive the glide from outside. Leave undefined and the line follows the hover and keyboard focus of the nearest link, button, option, tab, menu item, row or label around it, or its own.
onPhaseChange	(phase: "rest" \| "reading" \| "holding" \| "returning") => void	—	Reports each phase of the glide as it begins.
sound	boolean	false	Play a soft swish as a glide starts. Nothing plays, and no audio context exists, unless this is on; a hover-born swish also waits for the page's first press.
className	string	—	Merged onto the root element's classes.