KQ-1559 · CYCLORAMA/ROOM

Cyclorama Room

Your pictures composited into one continuous painted band — cover-fitted panels cross-faded across a blend zone so the seams dissolve — wrapped round the inside of a drum, with you at its centre behind a brass viewing rail. A Canvas 2D view draws the band in two-pixel strips from the camera, atan across and 1/cos up, so it bows toward you at the edges; curvature blends that from a flat strip and fov sets how much you see. Drag to look round 1:1 and a throw coasts on with its velocity on the drift spring; a heading strip along the base names each picture as it passes. Click a picture or press Enter and the heading glides to it and you walk up on the drift spring while the rail drops away; Escape or Step back walks you back. Left and Right turn 15°, Page Up and Page Down go picture to picture.

KQ-1559 · CYCLORAMA/ROOM

The round room

Fieldline Studios · drag to look round

facing · harbour at dawn · 1 of 6

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/cyclorama-room

Props

items: { src?, alt, caption? }[]; default six scenes painted in code; The pictures, stitched round the drum in order.
value / defaultValue: number; default 0; The heading at the centre of the view, degrees, controlled or initial.
onValueChange: (heading: number) => void; default —; Fires with the heading a drag, throw or key is heading for, 0–360.
curvature: number; default 0.8; How round the drum looks, 0 (a flat strip) to 1 (the true inside of a drum).
fov: number; default 75; Field of view across the frame, degrees, 50 to 110.
rail: boolean; default true; Draw the brass viewing rail in front of you.
drift: number; default 3; Idle turn, degrees a second, while nobody touches it; 0 holds still.
zoom: number; default 2.2; How close walking up to a picture gets, 1.4 to 3.
blend: number; default 0.12; How wide the cross-fade across each seam is, as a share of a picture, 0 to 0.3.
showStrip: boolean; default true; The heading strip along the base.
onOpen: (index: number | null) => void; default —; Walked up to a picture, or back to the centre (null).
onFrontChange: (index: number) => void; default —; The picture in front changed as the drum turned.
label: string; default "Panorama"; The view's accessible name.
dpr: number; default 2; Cap on the canvas pixel ratio, 1 to 2.
disabled: boolean; default false; No turning or walking up.
className: string; default —; Give it a height.

Prop	Type	Default	Description
items	{ src?, alt, caption? }[]	six scenes painted in code	The pictures, stitched round the drum in order.
value / defaultValue	number	0	The heading at the centre of the view, degrees, controlled or initial.
onValueChange	(heading: number) => void	—	Fires with the heading a drag, throw or key is heading for, 0–360.
curvature	number	0.8	How round the drum looks, 0 (a flat strip) to 1 (the true inside of a drum).
fov	number	75	Field of view across the frame, degrees, 50 to 110.
rail	boolean	true	Draw the brass viewing rail in front of you.
drift	number	3	Idle turn, degrees a second, while nobody touches it; 0 holds still.
zoom	number	2.2	How close walking up to a picture gets, 1.4 to 3.
blend	number	0.12	How wide the cross-fade across each seam is, as a share of a picture, 0 to 0.3.
showStrip	boolean	true	The heading strip along the base.
onOpen	(index: number \| null) => void	—	Walked up to a picture, or back to the centre (null).
onFrontChange	(index: number) => void	—	The picture in front changed as the drum turned.
label	string	"Panorama"	The view's accessible name.
dpr	number	2	Cap on the canvas pixel ratio, 1 to 2.
disabled	boolean	false	No turning or walking up.
className	string	—	Give it a height.