KQ-1216 · COMMUTE/LINE

Commute Line

A transit widget: the line's pill and direction, a delay badge whose figure rolls on the snap spring, a line diagram of stops with the train on it, and the chosen stop's arrival time. The train's position comes from the timetable, `now` and the delay (or a live `position`), with a dwell at each stop and a cosine pull-away and braking between them; each report moves the shown train there — at the pace steady reports set, so it reads as one continuous glide, or on the drift spring with its own velocity for a first or irregular report — and a jump back to the start is a fade, never a reverse. A window of stops follows the train and the chosen stop on glide and can be dragged sideways; each stop the train reaches pulses; the stops are a radio group where a tap or the arrow keys choose one and an ETA flag hops there on snap.

KQ-1216 · COMMUTE/LINE

Blue lineto Harbour

+3 min

Fieldline · due 08:57

in 10 min

blue line · after mill lane · fieldline in 10 min

Open it on the Atelier stage

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/commute-line

Props

timetable: { id: string; name: string; time: number | Date }[]; default —; Every stop on the run, in order, with its scheduled arrival.
now: number | Date; default —; The current moment. Each new value is a report: the train moves to where the timetable and delay put it.
delay: number; default 0; How late the train is running, in minutes: the badge (on time, late, very late from 6), every ETA, and where the train is.
position: number; default —; A reported position from a live feed, as a fractional stop index (2.4 is 40% of the way from the third stop to the fourth). Overrides the timetable's.
stops: number; default 6; How many stops the diagram shows at once, 2 to 8. Labels drop to two rows when the spacing is too small for one.
line: "red" | "green" | "blue"; default "blue"; The line's colour, a fixed pigment that reads in either theme, and its default name.
label: string; default "Blue line"; The line's name: its pill and the widget's accessible name.
direction: string; default —; Where the train is heading, shown beside the pill, e.g. "to Harbour".
value / defaultValue: string; default the next stop ahead of the train; The chosen stop's id: its ETA flag and the footer.
onValueChange: (id: string) => void; default —; Fires from a tap or a key that chose a stop.
utcOffset: number; default 0; Minutes east of UTC for the clock times shown, so the server and the page agree.
sound: boolean; default false; A chime when the visitor chooses a stop, higher the sooner the train gets there and low for a stop it has left. Reports and arrivals are silent.
disabled: boolean; default false; The train still moves; stops cannot be chosen and the line cannot be dragged.
className: string; default —; Classes for the root, a container up to max-w-[40rem].

Prop	Type	Default	Description
timetable	{ id: string; name: string; time: number \| Date }[]	—	Every stop on the run, in order, with its scheduled arrival.
now	number \| Date	—	The current moment. Each new value is a report: the train moves to where the timetable and delay put it.
delay	number	0	How late the train is running, in minutes: the badge (on time, late, very late from 6), every ETA, and where the train is.
position	number	—	A reported position from a live feed, as a fractional stop index (2.4 is 40% of the way from the third stop to the fourth). Overrides the timetable's.
stops	number	6	How many stops the diagram shows at once, 2 to 8. Labels drop to two rows when the spacing is too small for one.
line	"red" \| "green" \| "blue"	"blue"	The line's colour, a fixed pigment that reads in either theme, and its default name.
label	string	"Blue line"	The line's name: its pill and the widget's accessible name.
direction	string	—	Where the train is heading, shown beside the pill, e.g. "to Harbour".
value / defaultValue	string	the next stop ahead of the train	The chosen stop's id: its ETA flag and the footer.
onValueChange	(id: string) => void	—	Fires from a tap or a key that chose a stop.
utcOffset	number	0	Minutes east of UTC for the clock times shown, so the server and the page agree.
sound	boolean	false	A chime when the visitor chooses a stop, higher the sooner the train gets there and low for a stop it has left. Reports and arrivals are silent.
disabled	boolean	false	The train still moves; stops cannot be chosen and the line cannot be dragged.
className	string	—	Classes for the root, a container up to max-w-[40rem].