KQ-1840 · CARRIAGE/WINDOWS

Carriage Windows

A carousel built as the side of a railway carriage seen from the platform, a painted body with a cream window band, rounded windows each holding a view, and wheelsets on a rail. Dragging moves the carriage 1:1 while each view slides more slowly behind its glass, offset by the window's distance from the middle times the parallax, so every window has depth and the glass's reflection slides the other way with the speed; a flick is projected to where it would rest and the carriage runs to the nearest window on the springs.glide constants seeded with the release velocity. Rail joints lie every 96 px, and each time a wheel rolls over one the body dips and recovers on springs.recoil and, with sound on, a soft clack plays, so a fast flick clatters and an arrival gives one last clack; arrow keys step a window, Home and End go to the ends.

KQ-1840 · CARRIAGE/WINDOWS

Waylight Rail · the coast line

Six stops, one carriage

window 2 of 6 · Viaduct

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/carriage-windows

Props

items: { src?: string; alt: string; caption?: string }[]; default defaultCarriageItems; The views, one per window; without a src each is drawn in code (six views along a coast line by default).
value / defaultValue: number; default 0; The window at the centre, controlled or initial.
onValueChange: (index: number) => void; default —; Fires from the drag, flick, click or key that brought a new window to the centre.
parallax: number; default 0.55; How far behind the views seem, 0 (painted on the glass) to 1 (far away).
gap: number; default 22; The panel between windows, in px.
radius: number; default 14; The windows' corner radius, in px.
windowWidth: number; default fitted; Window width in px; by default fitted to the height and held to 72 % of the box.
livery: "green" | "maroon" | "navy" | "cream"; default "green"; The carriage's paint, pigments that read the same in either theme.
friction: number; default 0.5; How soon a flick runs down, 0 (coasts far) to 1 (stops short).
captions: boolean; default true; Small name plates under the windows.
sound: boolean; default false; A soft clack as the wheels cross each rail joint, after a visitor's drag, flick or key.
label: string; default "Carriage windows"; The carousel's accessible name.
disabled: boolean; default false; No moving.
className: string; default "h-full w-full"; Sizes the carriage; it fills its parent by default.

Prop	Type	Default	Description
items	{ src?: string; alt: string; caption?: string }[]	defaultCarriageItems	The views, one per window; without a src each is drawn in code (six views along a coast line by default).
value / defaultValue	number	0	The window at the centre, controlled or initial.
onValueChange	(index: number) => void	—	Fires from the drag, flick, click or key that brought a new window to the centre.
parallax	number	0.55	How far behind the views seem, 0 (painted on the glass) to 1 (far away).
gap	number	22	The panel between windows, in px.
radius	number	14	The windows' corner radius, in px.
windowWidth	number	fitted	Window width in px; by default fitted to the height and held to 72 % of the box.
livery	"green" \| "maroon" \| "navy" \| "cream"	"green"	The carriage's paint, pigments that read the same in either theme.
friction	number	0.5	How soon a flick runs down, 0 (coasts far) to 1 (stops short).
captions	boolean	true	Small name plates under the windows.
sound	boolean	false	A soft clack as the wheels cross each rail joint, after a visitor's drag, flick or key.
label	string	"Carriage windows"	The carousel's accessible name.
disabled	boolean	false	No moving.
className	string	"h-full w-full"	Sizes the carriage; it fills its parent by default.