KQ-1886 · PLANETARIUM/ROOF

Planetarium Roof

A gallery seen from the floor of a planetarium: prints pinned to the inside of a dome overhead in loose constellations of three, over a faint graticule, pricked stars and constellation lines, each print posed by the Jacobian of an equisolid fisheye at its centre so the ones near the edge compress and turn as the dome curves away. Dragging turns the whole dome 1:1 under the finger and a release coasts on with the throw's velocity, decaying by inertia, while keyboard moves turn it to each print on the springs.glide constants. Clicking a print flies it down into focus — its pose decomposed into rotation, scales, shear and centre and tweened to an upright, centred print on springs.glide as the dome dims and the caption rises — and Escape, Close or a click on the dome flies it home.

KQ-1886 · PLANETARIUM/ROOF

Waylight Planetarium · Autumn

The autumn ceiling

drag to turn the dome · 12 prints

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/planetarium-roof

Props

items: PlanetariumImage[]; default defaultPlanetariumImages; The prints, { id?, src?, alt, caption?, detail?, art? }, hung in constellations of three in order.
fov: number; default 110; Field of view across the dome, degrees, 70 to 150: a close dome or a wide sweep.
spacing: number; default 1; How far apart the constellations and their prints sit, 0.6 to 1.6.
inertia: number; default 0.6; How long a throw coasts, 0 (stops dead) to 1 (coasts long).
value / defaultValue: number | null; default — / null; The print in focus, or null for none.
onValueChange: (index: number | null) => void; default —; Fires from the click or key that brought a print into focus or sent it back.
drift: number; default 1.2; How fast the dome turns by itself while idle, degrees a second; 0 holds it still.
altitude: number; default 84; Where the view starts, degrees above the horizon (90 looks straight up).
cardSize: number; default 17; Each print's width on the dome, degrees.
graticule: boolean; default true; Draw the dome's altitude rings and meridians.
lines: boolean; default true; Join each constellation's prints with thin lines.
stars: number; default 140; How many stars are pricked into the dome.
seed: number; default 4; Seeds the constellations' shapes and the stars.
height: number; default 480; The stage's height, px.
label: string; default "Planetarium gallery"; The gallery's accessible name.
disabled: boolean; default false; No turning, clicks or keys; the dome dims.
className: string; default —; Classes for the stage.

Prop	Type	Default	Description
items	PlanetariumImage[]	defaultPlanetariumImages	The prints, { id?, src?, alt, caption?, detail?, art? }, hung in constellations of three in order.
fov	number	110	Field of view across the dome, degrees, 70 to 150: a close dome or a wide sweep.
spacing	number	1	How far apart the constellations and their prints sit, 0.6 to 1.6.
inertia	number	0.6	How long a throw coasts, 0 (stops dead) to 1 (coasts long).
value / defaultValue	number \| null	— / null	The print in focus, or null for none.
onValueChange	(index: number \| null) => void	—	Fires from the click or key that brought a print into focus or sent it back.
drift	number	1.2	How fast the dome turns by itself while idle, degrees a second; 0 holds it still.
altitude	number	84	Where the view starts, degrees above the horizon (90 looks straight up).
cardSize	number	17	Each print's width on the dome, degrees.
graticule	boolean	true	Draw the dome's altitude rings and meridians.
lines	boolean	true	Join each constellation's prints with thin lines.
stars	number	140	How many stars are pricked into the dome.
seed	number	4	Seeds the constellations' shapes and the stars.
height	number	480	The stage's height, px.
label	string	"Planetarium gallery"	The gallery's accessible name.
disabled	boolean	false	No turning, clicks or keys; the dome dims.
className	string	—	Classes for the stage.