KQ-1141 · GUESS/LINE

Guess Line

A line chart whose latest stretch is hidden: the reader draws what they think comes next across the shaded band, the pen steadied by the smoothing and the drawn line bending through it 1:1 between points, and letting go with every point guessed reveals the truth. The real line continues from the anchor under a clip whose edge sweeps across the band, the gap between guess and truth shades as it passes, a hum follows the real value under the sweep, and on landing the score rolls up on springs.recoil. Every hidden point is also a slider: Up and Down set it, Left and Right move between points carrying the guess on, Enter reveals and Escape clears.

KQ-1141 · GUESS/LINE

Fieldline ferry ridersthousands a month

riders · draw Sep to Dec

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/guess-line

Props

series: Record<string, GuessLineSeries>; default —; The charts on offer, by key. Each is { title, caption?, unit?, decimals?, hide?, step?, points: { label, value }[] }; hide is how many of the latest points are hidden (a third by default).
dataset: string; default —; Which of series is shown; the first key by default. Switching clears the guess.
value / defaultValue: (number | null)[]; default []; The guess, one value per hidden point, oldest first, null where nothing is drawn yet. Controlled or uncontrolled.
onValueChange: (guess: (number | null)[]) => void; default —; Fires from the move, tap or key that changed the guess (while drawing, once a point moves by half a step), and from the reset.
onReveal: (result: { score, guess, truth }) => void; default —; Fires when the real line has finished drawing in, with the score from 0 to 100 and both sets of values.
smoothing: number; default 0.5; 0 to 1: how much the pen is steadied and the guess rounded into a curve. 0 is a raw pen and a straight polyline.
reveal: number; default 1200; How long the real line takes to sweep in, in ms.
score: boolean; default true; Show and announce the score. Off, the gap still shades, without a number.
height: number; default 160; The plot's height in px; the chart fills the available width.
sound: boolean; default false; Play a pencil scratch that follows the pen, a tick per keyboard step, and the reveal: a swish and then a hum whose pitch follows the real line under the sweep. Nothing plays, and no audio context exists, unless this is on.
disabled: boolean; default false; Dims the chart and blocks drawing and keys.
className: string; default —; Merged onto the root's classes.

Prop	Type	Default	Description
series	Record<string, GuessLineSeries>	—	The charts on offer, by key. Each is { title, caption?, unit?, decimals?, hide?, step?, points: { label, value }[] }; hide is how many of the latest points are hidden (a third by default).
dataset	string	—	Which of series is shown; the first key by default. Switching clears the guess.
value / defaultValue	(number \| null)[]	[]	The guess, one value per hidden point, oldest first, null where nothing is drawn yet. Controlled or uncontrolled.
onValueChange	(guess: (number \| null)[]) => void	—	Fires from the move, tap or key that changed the guess (while drawing, once a point moves by half a step), and from the reset.
onReveal	(result: { score, guess, truth }) => void	—	Fires when the real line has finished drawing in, with the score from 0 to 100 and both sets of values.
smoothing	number	0.5	0 to 1: how much the pen is steadied and the guess rounded into a curve. 0 is a raw pen and a straight polyline.
reveal	number	1200	How long the real line takes to sweep in, in ms.
score	boolean	true	Show and announce the score. Off, the gap still shades, without a number.
height	number	160	The plot's height in px; the chart fills the available width.
sound	boolean	false	Play a pencil scratch that follows the pen, a tick per keyboard step, and the reveal: a swish and then a hum whose pitch follows the real line under the sweep. Nothing plays, and no audio context exists, unless this is on.
disabled	boolean	false	Dims the chart and blocks drawing and keys.
className	string	—	Merged onto the root's classes.