KQ-1212 · MOON/PHASE

Moon Phase

A moon widget whose lit part is computed from the date — the elongation with its six largest periodic terms — and drawn as the bright limb closed by the terminator's half ellipse, with the phase's name, the share lit and the next full and new moon beside it. A drag across the moon moves through the nights with the terminator travelling under the finger (its own width is a week), and a release projects the throw and glides to the nearest whole night on the glide spring with the release velocity, ticking once per night; the Full and New rows glide the moon to their nights, and seen from the south the whole moon turns over on glide. The night tile is a slider: arrow keys step a night, Page keys a week, Home and End the reach, and Escape or the Tonight pill returns to tonight.

KQ-1212 · MOON/PHASE

tonight · waxing gibbous · 78% lit

Open it on the Atelier stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/moon-phase

Props

now: Date | number; default —; Tonight: the moment the scrub counts from. Pass it, with timeZone, to render on the server; without it the widget keeps its own clock after hydration.
timeZone: string; default —; The IANA time zone the dates are written in, e.g. "UTC". Defaults to the runtime's own.
value / defaultValue: number; default 0; The night shown, in whole days from now (0 is tonight).
onValueChange: (value: number) => void; default —; Fires from the drag, key or button that changed the night shown.
range: number; default 60; How far the scrub reaches each way, in days.
hemisphere: "north" | "south"; default "north"; Which way up the moon is seen: south turns it over (the light on the other side, the seas upside down) and flips the drag so the shadow still follows the finger.
detail: boolean; default true; Draw the near side's seas, a few craters with rays and the limb's shading. Off: a flat, graphic moon.
glow: number; default 0.5; The halo's size and strength, 0 to 1; it also follows how much of the moon is lit.
label: string; default "Moon"; The widget's accessible name; the slider is named after it.
sound: boolean; default false; Tick once per night the visitor scrubs past, pitched by how much is lit, and distinctly at full and new.
disabled: boolean; default false; Shows the night but takes no drag, keys or buttons.
className: string; default —; Classes for the widget's root.

Prop	Type	Default	Description
now	Date \| number	—	Tonight: the moment the scrub counts from. Pass it, with timeZone, to render on the server; without it the widget keeps its own clock after hydration.
timeZone	string	—	The IANA time zone the dates are written in, e.g. "UTC". Defaults to the runtime's own.
value / defaultValue	number	0	The night shown, in whole days from now (0 is tonight).
onValueChange	(value: number) => void	—	Fires from the drag, key or button that changed the night shown.
range	number	60	How far the scrub reaches each way, in days.
hemisphere	"north" \| "south"	"north"	Which way up the moon is seen: south turns it over (the light on the other side, the seas upside down) and flips the drag so the shadow still follows the finger.
detail	boolean	true	Draw the near side's seas, a few craters with rays and the limb's shading. Off: a flat, graphic moon.
glow	number	0.5	The halo's size and strength, 0 to 1; it also follows how much of the moon is lit.
label	string	"Moon"	The widget's accessible name; the slider is named after it.
sound	boolean	false	Tick once per night the visitor scrubs past, pitched by how much is lit, and distinctly at full and new.
disabled	boolean	false	Shows the night but takes no drag, keys or buttons.
className	string	—	Classes for the widget's root.