KQ-1491 · THINK/THREAD

Think Thread

A thinking indicator drawn by an invisible pencil: a single fine line travels a small box, curls into loops, turns hairpins and doubles back, with only its last stretch kept and fading toward the tail. When thinking ends the stroke is pulled taut — every point travels to its place on a straight line, pencil end first, on springs.glide — the straightened line rings once like a plucked string on springs.recoil, and the status word fades in at its end on springs.snap. It needs no keys: the state is spoken politely when thinking starts and when it ends.

KQ-1491 · THINK/THREAD

Why did uptime dip on the 14th?

Reasoner

thinking · gaugeworks reasoner

Open it on the Canvas stage

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/think-thread

Props

thinking: boolean; default true; Whether it is thinking. Turning false pulls the line taut and shows `doneLabel`; turning true sets the pencil off again from the line's end.
label: string; default "Thinking"; The state while thinking, spoken politely when thinking starts.
doneLabel: string; default "Done"; The status word that fades in once the line is straight, and is spoken.
pace: number; default 1; How fast the pencil travels, as a multiple of its natural pace.
wander: number; default 0.5; 0 draws gentle waves; 1 curls into loops and doubles back often.
color: "ink" | "cobalt" | "signal" | "amber" | string; default "ink"; The line's colour: a named ink token or any CSS colour.
tail: number; default 140; How much of the path stays on the page, in px of travel.
strokeWidth: number; default 1.25; The line's weight, in px.
size: "sm" | "md" | "lg"; default "md"; The box: 96×20, 136×28 or 184×40 px, and the word's size.
seed: number; default 7; Picks the path; the same seed draws the same thought, on the server and in the browser.
paused: boolean; default false; Holds the pencil where it is.
dpr: number; default 2; Caps the canvas's device pixel ratio (never above 2).
onSettled: () => void; default —; Fires when the line has gathered and the pluck has rung out.
className: string; default —; Classes for the root; it is inline and grows to fill a stretched parent.

Prop	Type	Default	Description
thinking	boolean	true	Whether it is thinking. Turning false pulls the line taut and shows `doneLabel`; turning true sets the pencil off again from the line's end.
label	string	"Thinking"	The state while thinking, spoken politely when thinking starts.
doneLabel	string	"Done"	The status word that fades in once the line is straight, and is spoken.
pace	number	1	How fast the pencil travels, as a multiple of its natural pace.
wander	number	0.5	0 draws gentle waves; 1 curls into loops and doubles back often.
color	"ink" \| "cobalt" \| "signal" \| "amber" \| string	"ink"	The line's colour: a named ink token or any CSS colour.
tail	number	140	How much of the path stays on the page, in px of travel.
strokeWidth	number	1.25	The line's weight, in px.
size	"sm" \| "md" \| "lg"	"md"	The box: 96×20, 136×28 or 184×40 px, and the word's size.
seed	number	7	Picks the path; the same seed draws the same thought, on the server and in the browser.
paused	boolean	false	Holds the pencil where it is.
dpr	number	2	Caps the canvas's device pixel ratio (never above 2).
onSettled	() => void	—	Fires when the line has gathered and the pluck has rung out.
className	string	—	Classes for the root; it is inline and grows to fill a stretched parent.