KQ-1557 · SALON/WALK

Salon Walk

A long barrel-vaulted corridor in CSS 3D, every length in container units, with pictures hung alternately on both walls in gilt frames under small picture lights. Scroll walks you forward: the corridor is a real scroll container with the view sticky inside it, and the camera follows the scroll on the drift spring with a slight lean toward the picture ahead. As you draw level with a frame it swings toward you on its wire on a spring at glide stiffness whose damping falls as sway rises, so it overshoots and swings back once, while its plaque brightens and its light comes up. Arrow keys step frame to frame, Home and End go to either end, and a click on a picture walks to it.

KQ-1557 · SALON/WALK

The long gallery

Waylight House · scroll or arrow keys

level with 1 of 8 · harbour at dusk

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/salon-walk

Props

items: { src?, alt, caption?, note? }[]; default eight paintings drawn in code; The pictures, hung left, right, left down the corridor.
value / defaultValue: number; default 0; The picture you stand level with, controlled or initial.
onValueChange: (index: number) => void; default —; Fires from the scroll, key or click that brought you level with a new picture.
wallGap: number; default 1; Distance between the walls as a multiple of the height, 0.6 to 1.6 (held to the box's width).
spacing: number; default 1; Distance between pictures along the corridor, 0.6 to 1.8.
sway: number; default 0.6; How far a picture swings toward you and how freely, 0 (hangs flat) to 1.
lighting: "warm" | "daylight" | "candle" | "night"; default "warm"; The picture lights and how much the corridor is lit around them.
lightColor: string; default from lighting; Overrides the picture lights' colour.
wallColor: string; default a salon-red pigment; Wall plaster.
frameColor: string; default a gilt pigment; Frame moulding and the brass of the lights.
eyeHeight: number; default 0.5; Eye height, 0 (low) to 1 (high).
walk: number; default 1; Scroll distance per picture, 0.5 to 2.
label: string; default "Picture corridor"; The corridor's accessible name.
disabled: boolean; default false; No stepping by key or click; scrolling still walks.
className: string; default —; Give it a height; the corridor scales with it.

Prop	Type	Default	Description
items	{ src?, alt, caption?, note? }[]	eight paintings drawn in code	The pictures, hung left, right, left down the corridor.
value / defaultValue	number	0	The picture you stand level with, controlled or initial.
onValueChange	(index: number) => void	—	Fires from the scroll, key or click that brought you level with a new picture.
wallGap	number	1	Distance between the walls as a multiple of the height, 0.6 to 1.6 (held to the box's width).
spacing	number	1	Distance between pictures along the corridor, 0.6 to 1.8.
sway	number	0.6	How far a picture swings toward you and how freely, 0 (hangs flat) to 1.
lighting	"warm" \| "daylight" \| "candle" \| "night"	"warm"	The picture lights and how much the corridor is lit around them.
lightColor	string	from lighting	Overrides the picture lights' colour.
wallColor	string	a salon-red pigment	Wall plaster.
frameColor	string	a gilt pigment	Frame moulding and the brass of the lights.
eyeHeight	number	0.5	Eye height, 0 (low) to 1 (high).
walk	number	1	Scroll distance per picture, 0.5 to 2.
label	string	"Picture corridor"	The corridor's accessible name.
disabled	boolean	false	No stepping by key or click; scrolling still walks.
className	string	—	Give it a height; the corridor scales with it.