KQ-1466 · STAR/SPIRAL

Star Spiral

A background of a spiral galaxy built from density waves: every star rides its own closed orbit, the orbits bulging into lobes that twist with radius, so the arms stand where neighbouring orbits crowd while every star streams through them, the core turning faster than the rim. Young stars light only along the arm ridges, a bulge glows at the centre and dust rides each arm's leading edge, becoming the dark lane when the disk is seen edge on. A drag tilts the plane 1:1, rubber-banding past edge on, and on release it swings back on springs with the springs.drift constants taking the release velocity; a tap sends a ring of star formation out from the core on the enter easing as the core flares on a drift-spring impulse, and keyboard focus on a control inside tilts the plane toward it and sends a softer ring.

KQ-1466 · STAR/SPIRAL

Fernworks Observatory

Open nights, every new moon

Twelve on the ridge

2 arms · 1400 stars · tilt 55°

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/star-spiral

Props

children: React.ReactNode; default —; The content in front of the galaxy: a hero line, a heading, a call to action.
arms: number; default 2; How many arms the density wave raises, 1 to 6.
stars: number; default 1400; How many stars make the galaxy, 300 to 3000; dust adds three tenths more.
tilt: number; default 55; The disk's resting inclination in degrees, 0 (face on) to 80 (nearly edge on).
speed: number; default 1; How fast the disk turns, 0 (still) to 3.
twist: number; default 0.5; How tightly the arms wind, 0 (open) to 1 (tight).
size: number; default 1; The galaxy's size against the box, 0.4 to 1.4.
originX: number; default 0.5; Where the core sits across the box, 0 to 1; narrow boxes pull it toward the middle.
originY: number; default 0.5; Where the core sits down the box, 0 to 1.
core: number; default 0.6; How bright the bulge glows, 0 to 1.
dust: number; default 0.5; How heavy the dust lanes along the arms are, 0 (none) to 1.
color: string; default "var(--accent-bright)"; The young stars' colour along the arms, any CSS colour.
coreColor: string; default "var(--warn)"; The old stars' and the bulge's colour, any CSS colour.
interactive: boolean; default true; A drag tilts the plane, a tap sends a ring of new stars out, and keyboard focus inside tilts toward the control.
pointerStrength: number; default 0.7; How far a drag tilts the plane and how bright a ring burns, 0 to 1.
paused: boolean; default false; Hold the disk still; a drag still tilts it.
seed: number; default 1; Seeds every star's orbit and the moment the galaxy starts from.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
onTiltChange: (tilt: StarTilt) => void; default —; Fires when the plane's tilt changes by a whole degree, from a drag, keyboard focus or the swing back.
onActiveChange: (active: boolean) => void; default —; Fires when a drag or keyboard focus starts (true) or stops (false) tilting the plane.
onRing: () => void; default —; Fires when a tap (or keyboard focus) sends a ring of star formation out from the core.
className: string; default "h-full w-full"; Sizes and shapes the box.

Prop	Type	Default	Description
children	React.ReactNode	—	The content in front of the galaxy: a hero line, a heading, a call to action.
arms	number	2	How many arms the density wave raises, 1 to 6.
stars	number	1400	How many stars make the galaxy, 300 to 3000; dust adds three tenths more.
tilt	number	55	The disk's resting inclination in degrees, 0 (face on) to 80 (nearly edge on).
speed	number	1	How fast the disk turns, 0 (still) to 3.
twist	number	0.5	How tightly the arms wind, 0 (open) to 1 (tight).
size	number	1	The galaxy's size against the box, 0.4 to 1.4.
originX	number	0.5	Where the core sits across the box, 0 to 1; narrow boxes pull it toward the middle.
originY	number	0.5	Where the core sits down the box, 0 to 1.
core	number	0.6	How bright the bulge glows, 0 to 1.
dust	number	0.5	How heavy the dust lanes along the arms are, 0 (none) to 1.
color	string	"var(--accent-bright)"	The young stars' colour along the arms, any CSS colour.
coreColor	string	"var(--warn)"	The old stars' and the bulge's colour, any CSS colour.
interactive	boolean	true	A drag tilts the plane, a tap sends a ring of new stars out, and keyboard focus inside tilts toward the control.
pointerStrength	number	0.7	How far a drag tilts the plane and how bright a ring burns, 0 to 1.
paused	boolean	false	Hold the disk still; a drag still tilts it.
seed	number	1	Seeds every star's orbit and the moment the galaxy starts from.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
onTiltChange	(tilt: StarTilt) => void	—	Fires when the plane's tilt changes by a whole degree, from a drag, keyboard focus or the swing back.
onActiveChange	(active: boolean) => void	—	Fires when a drag or keyboard focus starts (true) or stops (false) tilting the plane.
onRing	() => void	—	Fires when a tap (or keyboard focus) sends a ring of star formation out from the core.
className	string	"h-full w-full"	Sizes and shapes the box.