KQ-1608 · NIGHT/SIDE

Night Side

An invented world as a dotted globe on Canvas 2D: seeded continents, a body shaded per pixel with a soft terminator and a warm twilight band, and city lights glowing on the dark half. Change the hour and the day sweeps round on springs.drift while each city switches on with its own flicker as night reaches it; routes between offices rise as arcs on springs.glide the first time the globe is seen, then pulses of light ride them and ring out on arrival. Drag turns it 1:1 and tips it with a rubber band, a throw coasts, a click brings an office round on glide; arrow keys turn and tip, Page Up and Page Down step through the offices, Home faces one and Escape lets it turn again.

KQ-1608 · NIGHT/SIDE

Gaugeworks · network

Six offices, one working day

18:00 · 4 of 6 offices in the dark · 5 routes

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-side

Props

points: NightSidePoint[]; default defaultNightSidePoints; The offices: { id, name, lat, lon }.
routes: NightSideRoute[]; default defaultNightSideRoutes; Routes between offices by id: { from, to }.
timeOfDay: number; default 18; The hour at the prime meridian, 0 to 24; changing it sweeps the day across the globe.
arcHeight: number; default 0.45; How high the route arcs rise, 0 (hugging the ground) to 1.
dotDensity: number; default 66; Rows of dots from pole to pole, 36 to 120.
season: number; default 14; The sun's declination in degrees, −23.4 to 23.4.
tilt: number; default 16; How far the view looks down on the north, −30 to 30 degrees.
spin: number; default 5; Degrees per second of the slow turn; 0 holds it still.
momentum: number; default 0.6; How long a throw coasts, 0 (stops at once) to 1.
pulseSpeed: number; default 1; Pace of the light along the routes, 0 (held, lit) to 3.
lights: number; default 0.8; How many cities glow and how brightly, 0 to 1.
colors: NightSideColors; default —; The inks: { day, night, land, lights, routes, points } as CSS colours; tokens and fixed pigments by default.
value / defaultValue: string | null; default null; The selected office's id, brought round to face you; controlled or initial.
onValueChange: (id: string | null) => void; default —; Fires from the click or key that selected an office or cleared it.
interactive: boolean; default true; Drag, click and the keys turn the globe.
paused: boolean; default false; Holds the turn, the pulses and the day's sweep.
seed: number; default 3; Seeds the continents and the cities.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
label: string; default "Offices around the world"; The globe's accessible name; the hour and the offices in the dark are added.
className: string; default "h-60 w-full"; Sizes the box; the globe takes its smaller side.

Prop	Type	Default	Description
points	NightSidePoint[]	defaultNightSidePoints	The offices: { id, name, lat, lon }.
routes	NightSideRoute[]	defaultNightSideRoutes	Routes between offices by id: { from, to }.
timeOfDay	number	18	The hour at the prime meridian, 0 to 24; changing it sweeps the day across the globe.
arcHeight	number	0.45	How high the route arcs rise, 0 (hugging the ground) to 1.
dotDensity	number	66	Rows of dots from pole to pole, 36 to 120.
season	number	14	The sun's declination in degrees, −23.4 to 23.4.
tilt	number	16	How far the view looks down on the north, −30 to 30 degrees.
spin	number	5	Degrees per second of the slow turn; 0 holds it still.
momentum	number	0.6	How long a throw coasts, 0 (stops at once) to 1.
pulseSpeed	number	1	Pace of the light along the routes, 0 (held, lit) to 3.
lights	number	0.8	How many cities glow and how brightly, 0 to 1.
colors	NightSideColors	—	The inks: { day, night, land, lights, routes, points } as CSS colours; tokens and fixed pigments by default.
value / defaultValue	string \| null	null	The selected office's id, brought round to face you; controlled or initial.
onValueChange	(id: string \| null) => void	—	Fires from the click or key that selected an office or cleared it.
interactive	boolean	true	Drag, click and the keys turn the globe.
paused	boolean	false	Holds the turn, the pulses and the day's sweep.
seed	number	3	Seeds the continents and the cities.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
label	string	"Offices around the world"	The globe's accessible name; the hour and the offices in the dark are added.
className	string	"h-60 w-full"	Sizes the box; the globe takes its smaller side.