KQ-1534 · STAR/GEODE

Star Geode

A shell of stars on a slowly turning sphere, drawn in Canvas 2D with real 3D: an icosahedron cut into 20 to 320 facets and pushed onto the sphere, a star at every vertex and fainter ones scattered across the faces, all linked by fine seams; the outer faces are nearly clear and the inner ones are crystal. Opened by a press, a key or the page scrolling past, it breaks along its seams: each triangle drifts outward with its stars attached, starting from a seeded crack, and turns about its own axis so its inner face catches the light — opening on springs.drift and closing on springs.snap, so the pieces click back into one sphere with a single crisp overshoot. A drag spins it 1:1 and a flick coasts back to the slow turn; it is a switch, so Space or Enter toggles it, Right/Up open, Left/Down close and Shift+arrows turn it.

KQ-1534 · STAR/GEODE

Gaugeworks · observatory

Night sky, cracked open

closed · 80 facets, press to crack it

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

Props

detail: number; default 2; How finely the shell is cut: 1 (20 facets) to 4 (320).
explode: number; default 0.45; How far the pieces drift apart when it opens, 0 to 1. The sphere sizes itself so the open pieces stay in the box.
twinkle: number; default 0.5; How much the stars twinkle, 0 (steady) to 1.
starCount: number; default 160; How many faint stars are scattered across the facets, 0 to 600, besides the one at every vertex.
open / defaultOpen: boolean; default false; Whether the geode is held open. Controlled or initial.
onOpenChange: (open: boolean) => void; default —; Fires from the press, key or timer that opened or closed it, with the new state.
autoClose: number; default 2600; Close by itself this long after opening, ms; 0 keeps it open until pressed again.
trigger: "press" | "scroll" | "both"; default "both"; What cracks it open: a press, the page scrolling past it, or both. The keys always work.
spin: number; default 8; The shell's slow turn, degrees per second, 0 to 60.
color: string; default "var(--foreground)"; The stars and the seams.
crystal: string; default "var(--accent-bright)"; The crystal on the inner faces.
paused: boolean; default false; Hold the turn and the twinkle; opening, closing and dragging still move.
seed: number; default 1; Seeds the scattered stars and how the pieces part, so two geodes never break alike.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
disabled: boolean; default false; No opening or turning by hand or key.
label: string; default "Open the geode"; The accessible name of the geode's switch.
className: string; default —; Sizes the box; it fills its parent by default (h-full w-full).

Prop	Type	Default	Description
detail	number	2	How finely the shell is cut: 1 (20 facets) to 4 (320).
explode	number	0.45	How far the pieces drift apart when it opens, 0 to 1. The sphere sizes itself so the open pieces stay in the box.
twinkle	number	0.5	How much the stars twinkle, 0 (steady) to 1.
starCount	number	160	How many faint stars are scattered across the facets, 0 to 600, besides the one at every vertex.
open / defaultOpen	boolean	false	Whether the geode is held open. Controlled or initial.
onOpenChange	(open: boolean) => void	—	Fires from the press, key or timer that opened or closed it, with the new state.
autoClose	number	2600	Close by itself this long after opening, ms; 0 keeps it open until pressed again.
trigger	"press" \| "scroll" \| "both"	"both"	What cracks it open: a press, the page scrolling past it, or both. The keys always work.
spin	number	8	The shell's slow turn, degrees per second, 0 to 60.
color	string	"var(--foreground)"	The stars and the seams.
crystal	string	"var(--accent-bright)"	The crystal on the inner faces.
paused	boolean	false	Hold the turn and the twinkle; opening, closing and dragging still move.
seed	number	1	Seeds the scattered stars and how the pieces part, so two geodes never break alike.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
disabled	boolean	false	No opening or turning by hand or key.
label	string	"Open the geode"	The accessible name of the geode's switch.
className	string	—	Sizes the box; it fills its parent by default (h-full w-full).