KQ-1843 · NIGHT/FACADE

Night Facade

A tall apartment block at night whose small square windows each keep their own seeded schedule — warm lamps, blue screens, a kitchen's tube, the stairwell's fluorescent — so it runs from a busy early evening to a handful of night owls, while rooms go dark and light again, screens flicker and figures pass behind a few lit windows at the hour you leave it on. A rail down the right side is a vertical slider: dragging it moves the moon along its arc, deepens the sky and lets the windows answer one after another, each after its own short delay, before the thumb settles on the quarter hour on springs.snap. Up and Down move a step, Page Up and Page Down an hour, and Home and End go to 18:00 and 04:00.

KQ-1843 · NIGHT/FACADE

Waylight · nights

The street is winding down

21:00

21:00 · 10 floors · warm lamps

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/night-facade

Props

hour / defaultHour: number; default 21; The hour, 18 (6 pm) to 28 (4 am), 24 being midnight; controlled or initial.
onHourChange: (hour: number) => void; default —; Fires from the drag or key that moved the night, with the new hour on the step.
floors: number; default 10; Floors of windows, 4 to 18.
columns: number; default —; Windows across; by default as many as the width takes at the floor height.
warmth: number; default 0.6; Lamp colour, 0 (cool white) to 1 (deep tungsten amber).
step: number; default 15; Minutes the rail snaps to.
silhouettes: boolean; default true; Figures pass behind a few lit windows now and then.
flicker: boolean; default true; Screens flicker blue and the stairwell tube stutters.
beacon: boolean; default true; The red light on the antenna blinks.
rail: boolean; default true; Show the hour rail down the right side.
paused: boolean; default false; Hold the building still: no flicker, no figures, no rooms changing.
seed: number; default 1; Seeds who lives where and their hours.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
label: string; default "Apartment building at night"; The picture's accessible name; the hour and lit count are added to it.
disabled: boolean; default false; The rail does not move.
className: string; default "h-[520px] w-full"; Sizes the box.

Prop	Type	Default	Description
hour / defaultHour	number	21	The hour, 18 (6 pm) to 28 (4 am), 24 being midnight; controlled or initial.
onHourChange	(hour: number) => void	—	Fires from the drag or key that moved the night, with the new hour on the step.
floors	number	10	Floors of windows, 4 to 18.
columns	number	—	Windows across; by default as many as the width takes at the floor height.
warmth	number	0.6	Lamp colour, 0 (cool white) to 1 (deep tungsten amber).
step	number	15	Minutes the rail snaps to.
silhouettes	boolean	true	Figures pass behind a few lit windows now and then.
flicker	boolean	true	Screens flicker blue and the stairwell tube stutters.
beacon	boolean	true	The red light on the antenna blinks.
rail	boolean	true	Show the hour rail down the right side.
paused	boolean	false	Hold the building still: no flicker, no figures, no rooms changing.
seed	number	1	Seeds who lives where and their hours.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
label	string	"Apartment building at night"	The picture's accessible name; the hour and lit count are added to it.
disabled	boolean	false	The rail does not move.
className	string	"h-[520px] w-full"	Sizes the box.