KQ-1240 · STAND/MONITOR

Stand Monitor

A desktop display on a height-adjustable stand: dragging the screen lifts the panel on its column 1:1 under the finger, rubber-banding at the stops, and a heavy counterbalanced arm coasts it to where the throw would stop on the glide spring with the release velocity; dragging its top edge tilts it back in 3D on a friction hinge that holds where it is left and snaps to the nearest degree. The turn button pivots it to portrait on glide while the stand lifts it clear of the desk, the pivot height worked out each frame from the turned panel's reach, and once it settles the picture re-orients upright in a container the new shape; a cable hanging from its back swings at every move on a soft underdamped spring. The screen and its top edge are sliders for height and tilt that take arrow, Page, Home and End keys, and the turn button is a toggle.

KQ-1240 · STAND/MONITOR

Gaugeworks · Basin 3Live

1,284 m³

Weir1.42 m
Sluice0.38 m
Outfall0.91 m

landscape · height 50% · tilt 4°

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/stand-monitor

Props

children: React.ReactNode; default —; The screen: any content, in a size container the shape of the screen in its current orientation.
label: string; default "Monitor"; The display's accessible name.
height: number; default 0.5; Where the panel sits on the column, 0 (lowest) to 1 (highest). Drags start from here, and a new value moves it.
onHeightChange: (height: number) => void; default —; Fires from a drag or a key with the height the panel settles at.
tilt: number; default 4; How far the top leans back, 0 to 15 degrees. Drags start from here, and a new value moves it.
onTiltChange: (tilt: number) => void; default —; Fires from a drag or a key with the tilt the hinge settles at.
orientation / defaultOrientation: "landscape" | "portrait"; default "landscape"; Which way the panel stands.
onOrientationChange: (orientation: StandMonitorOrientation) => void; default —; Fires from the turn button with the orientation asked for.
finish: "silver" | "black" | "white"; default "silver"; Stand, back and bezel.
sound: boolean; default false; The hinge creaks while the panel is dragged or turning, with the speed of the hand; the loop always stops.
disabled: boolean; default false; Takes no drags, keys or turns.
className: string; default —; Classes for the 16:9 root; size it by width.

Prop	Type	Default	Description
children	React.ReactNode	—	The screen: any content, in a size container the shape of the screen in its current orientation.
label	string	"Monitor"	The display's accessible name.
height	number	0.5	Where the panel sits on the column, 0 (lowest) to 1 (highest). Drags start from here, and a new value moves it.
onHeightChange	(height: number) => void	—	Fires from a drag or a key with the height the panel settles at.
tilt	number	4	How far the top leans back, 0 to 15 degrees. Drags start from here, and a new value moves it.
onTiltChange	(tilt: number) => void	—	Fires from a drag or a key with the tilt the hinge settles at.
orientation / defaultOrientation	"landscape" \| "portrait"	"landscape"	Which way the panel stands.
onOrientationChange	(orientation: StandMonitorOrientation) => void	—	Fires from the turn button with the orientation asked for.
finish	"silver" \| "black" \| "white"	"silver"	Stand, back and bezel.
sound	boolean	false	The hinge creaks while the panel is dragged or turning, with the speed of the hand; the loop always stops.
disabled	boolean	false	Takes no drags, keys or turns.
className	string	—	Classes for the 16:9 root; size it by width.