KQ-1809 · COLONNADE/PASS

Colonnade Pass

A walk along a sunlit cloister, ray-cast per pixel in one WebGL2 pass: fluted columns down the left with a lawn court beyond, a coffered ceiling, a paved walk and a wall with arched doors, and the sun's light coming in between the columns to lay bars of light and shade across the floor and up the wall, each shadow's penumbra widening with the distance to the column that casts it, faint shafts in the air and the eye adjusting as you pass from sun to shade. You walk at `pace` (and with `scroll`, with the nearest scroll container), the near columns sweeping past while the far ones creep; the pointer moves the sun, across for its angle so the bars lean and up and down for its height so they lengthen, following on springs.glide, and the first sighting swings the sun in from the far side on springs.drift. It is a slider: arrows, Page Up and Down, Home and End move the sun's angle, Up and Down its height.

KQ-1809 · COLONNADE/PASS

Basinworks Cloister

Rooms around a quiet court.

sun 25° · walking 1.0 m/s

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/colonnade-pass

Props

columns: number; default 6; How closely the columns stand, 3 (wide bays, 7.2 m apart) to 12 (close set, 1.8 m apart).
sunAngle: number; default 25; The sun's angle along the walk where it starts, −60° to 60°; changing it moves the sun there. Positive puts the sun to the right, so the bars lean left.
pace: number; default 1; How fast you walk past the columns, in metres a second, 0 (standing) to 2.5.
value: number; default —; The sun's angle when you control it, in degrees; pair with `onValueChange`.
onValueChange: (degrees: number) => void; default —; Fires from the pointer or the keys that moved the sun, with its new angle in degrees.
sunHeight: number; default 34; The sun's height above the horizon where it starts, 12° to 65°; lower suns lay longer bars.
softness: number; default 0.3; How soft the shadows' edges are, 0 (a crisp noon sun) to 1 (thin cloud).
haze: number; default 0.35; How much the air inside the portico glows where the sun gets through, 0 to 1.
scroll: boolean; default false; Walk with the nearest scroll container as well as on your own.
stoneColor: string; default "oklch(0.84 0.035 78)"; The stone's colour, any CSS colour. Pigment: daylight reads the same in either theme.
sunColor: string; default "oklch(0.96 0.06 82)"; The sunlight's colour, any CSS colour.
skyColor: string; default "oklch(0.84 0.06 235)"; The sky's colour, which also fills the shade, any CSS colour.
children: React.ReactNode; default —; Content above the scene: a hero line, a heading, a call to action.
intro: boolean; default true; The first time the colonnade is seen, the sun swings in from the far side and the bars sweep into place.
interactive: boolean; default true; The pointer and keys move the sun.
paused: boolean; default false; Stand still; the sun still answers.
label: string; default "Sun angle"; Names the sun control for assistive technology.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
disabled: boolean; default false; Shows the walk but takes no input.
className: string; default "h-56 w-full"; Sizes the box.

Prop	Type	Default	Description
columns	number	6	How closely the columns stand, 3 (wide bays, 7.2 m apart) to 12 (close set, 1.8 m apart).
sunAngle	number	25	The sun's angle along the walk where it starts, −60° to 60°; changing it moves the sun there. Positive puts the sun to the right, so the bars lean left.
pace	number	1	How fast you walk past the columns, in metres a second, 0 (standing) to 2.5.
value	number	—	The sun's angle when you control it, in degrees; pair with `onValueChange`.
onValueChange	(degrees: number) => void	—	Fires from the pointer or the keys that moved the sun, with its new angle in degrees.
sunHeight	number	34	The sun's height above the horizon where it starts, 12° to 65°; lower suns lay longer bars.
softness	number	0.3	How soft the shadows' edges are, 0 (a crisp noon sun) to 1 (thin cloud).
haze	number	0.35	How much the air inside the portico glows where the sun gets through, 0 to 1.
scroll	boolean	false	Walk with the nearest scroll container as well as on your own.
stoneColor	string	"oklch(0.84 0.035 78)"	The stone's colour, any CSS colour. Pigment: daylight reads the same in either theme.
sunColor	string	"oklch(0.96 0.06 82)"	The sunlight's colour, any CSS colour.
skyColor	string	"oklch(0.84 0.06 235)"	The sky's colour, which also fills the shade, any CSS colour.
children	React.ReactNode	—	Content above the scene: a hero line, a heading, a call to action.
intro	boolean	true	The first time the colonnade is seen, the sun swings in from the far side and the bars sweep into place.
interactive	boolean	true	The pointer and keys move the sun.
paused	boolean	false	Stand still; the sun still answers.
label	string	"Sun angle"	Names the sun control for assistive technology.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
disabled	boolean	false	Shows the walk but takes no input.
className	string	"h-56 w-full"	Sizes the box.