KQ-1850 · FREIGHT/SIDINGS

Freight Sidings

A rail yard seen from above and turned so the tracks cross the frame on a diagonal: loaded lines alternate with empty sidings, and each line carries a train of flat cars loaded with pictures, its head car showing a marker lamp. Page scroll moves the trains in alternating directions at their own speeds, a sideways drag scrubs the yard 1:1 under the hand with a flick carried on, and left alone each train shunts slowly back and forth; every train follows its target on its own spring and slows to a crawl under the pointer or keyboard. Clicking a car rolls it to the front: it uncouples on springs.flick, switches onto the siding on springs.glide, rolls past the cars ahead while they back up, switches back at the head and couples, and the jolt runs down the train car by car on the recoil spring; the yard is a grid where arrows move between cars and Enter rolls one to the front.

KQ-1850 · FREIGHT/SIDINGS

Fernworks Print Fair

Prints on the move

12 prints · click a car to roll it to the front

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/freight-sidings

Props

items: FreightSidingsItem[]; default defaultFreightItems; The pictures, dealt round the trains in turn: { src?, alt, caption? }.
value / defaultValue: number; default —; The picture last rolled to the front of its train; controlled or initial. Nothing is chosen until a car is.
onValueChange: (index: number) => void; default —; Fires from the click or key that rolled a car to the front, with its picture's index.
tilt: number; default 24; How far the yard is turned, degrees, -40 to 40; the tracks cross the frame on this diagonal.
speed: number; default 1; How far the trains travel for each pixel of scroll or drag, 0 to 2.
gap: number; default 12; Space between coupled cars, px.
trains: number; default 3; How many trains run in the yard, 2 to 6.
carLength: number; default 108; A car's length, px.
drift: number; default 0.5; How far each train shunts back and forth on its own while you watch, 0 (still) to 1.
slow: number; default 0.8; How much a train under the pointer or keyboard slows, 0 (not at all) to 1 (to a crawl).
scroll: boolean; default true; Scrolling the page moves the trains.
height: number; default 560; Height of the yard, px.
label: string; default "Rail yard"; The yard's accessible name.
sound: boolean; default false; Play the couplers' clacks, and the rail joints under a drag. Off unless asked for.
paused: boolean; default false; Hold every train where it is; clicks still roll cars to the front.
disabled: boolean; default false; No drags, clicks or keys; the yard dims.
className: string; default —; Classes for the yard.

Prop	Type	Default	Description
items	FreightSidingsItem[]	defaultFreightItems	The pictures, dealt round the trains in turn: { src?, alt, caption? }.
value / defaultValue	number	—	The picture last rolled to the front of its train; controlled or initial. Nothing is chosen until a car is.
onValueChange	(index: number) => void	—	Fires from the click or key that rolled a car to the front, with its picture's index.
tilt	number	24	How far the yard is turned, degrees, -40 to 40; the tracks cross the frame on this diagonal.
speed	number	1	How far the trains travel for each pixel of scroll or drag, 0 to 2.
gap	number	12	Space between coupled cars, px.
trains	number	3	How many trains run in the yard, 2 to 6.
carLength	number	108	A car's length, px.
drift	number	0.5	How far each train shunts back and forth on its own while you watch, 0 (still) to 1.
slow	number	0.8	How much a train under the pointer or keyboard slows, 0 (not at all) to 1 (to a crawl).
scroll	boolean	true	Scrolling the page moves the trains.
height	number	560	Height of the yard, px.
label	string	"Rail yard"	The yard's accessible name.
sound	boolean	false	Play the couplers' clacks, and the rail joints under a drag. Off unless asked for.
paused	boolean	false	Hold every train where it is; clicks still roll cars to the front.
disabled	boolean	false	No drags, clicks or keys; the yard dims.
className	string	—	Classes for the yard.