KQ-1211 · SUN/ARC

Sun Arc

A daylight widget: the sun rides a sine arch from first to last light over a horizon whose sky, ground, glow and stars take the hour's colours, with the daylight left read beside it. Press anywhere in the sky and the sun comes to the finger on the flick spring, follows it 1:1 along the arch and rubber-bands past dawn and dusk; a release projects the throw and the sun glides to the landing on the glide spring with the release velocity, ticking once per hour crossed. The rail under the panel lines up with the arch and is a real slider: arrow keys step the time, Page keys an hour, Home and End jump to first and last light, and Escape or the Now pill brings the sun back to the present.

KQ-1211 · SUN/ARC

4 h 12 m

of daylight left

Sunrise06:14

Sunset19:52

live · 15:40 · 4 h 12 m of daylight left

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/sun-arc

Props

sunrise: number; default —; Sunrise, in minutes after local midnight (06:14 is 374).
sunset: number; default —; Sunset, in minutes after local midnight.
dawn: number; default sunrise - 30; First light, in minutes after midnight: where the arc's left tail ends.
dusk: number; default sunset + 30; Last light, in minutes after midnight: where the arc's right tail ends.
now: Date | number; default —; The live moment the sun follows while the value is null. 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 now is read in, e.g. "UTC". Defaults to the runtime's own.
value / defaultValue: number | null; default null; The time shown, in minutes after midnight; null follows now.
onValueChange: (value: number | null) => void; default —; Fires from the drag, tap, key or Now press that changed the time shown (null when it returns to now).
step: number; default 5; Minutes per arrow key, and the grid a scrub lands on.
clock: "12" | "24"; default "24"; Print every time in 24-hour (06:14) or 12-hour (6:14 am) form.
sky: boolean; default true; Paint the sky, ground, horizon glow and stars with the hour. Off leaves a quiet panel on the card surface.
marks: boolean; default true; Show the dawn and dusk marks with their times, and a dot on the arc for every whole hour.
label: string; default "Daylight"; The widget's name: the group's and the slider's accessible name, shown over the reading when there is room.
sound: boolean; default false; Tick once per whole hour the visitor scrubs past, pitched by the sun's height, and brighter at sunrise and sunset.
disabled: boolean; default false; Shows the day but takes no drag or keys.
className: string; default —; Classes for the widget's root.

Prop	Type	Default	Description
sunrise	number	—	Sunrise, in minutes after local midnight (06:14 is 374).
sunset	number	—	Sunset, in minutes after local midnight.
dawn	number	sunrise - 30	First light, in minutes after midnight: where the arc's left tail ends.
dusk	number	sunset + 30	Last light, in minutes after midnight: where the arc's right tail ends.
now	Date \| number	—	The live moment the sun follows while the value is null. 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 now is read in, e.g. "UTC". Defaults to the runtime's own.
value / defaultValue	number \| null	null	The time shown, in minutes after midnight; null follows now.
onValueChange	(value: number \| null) => void	—	Fires from the drag, tap, key or Now press that changed the time shown (null when it returns to now).
step	number	5	Minutes per arrow key, and the grid a scrub lands on.
clock	"12" \| "24"	"24"	Print every time in 24-hour (06:14) or 12-hour (6:14 am) form.
sky	boolean	true	Paint the sky, ground, horizon glow and stars with the hour. Off leaves a quiet panel on the card surface.
marks	boolean	true	Show the dawn and dusk marks with their times, and a dot on the arc for every whole hour.
label	string	"Daylight"	The widget's name: the group's and the slider's accessible name, shown over the reading when there is room.
sound	boolean	false	Tick once per whole hour the visitor scrubs past, pitched by the sun's height, and brighter at sunrise and sunset.
disabled	boolean	false	Shows the day but takes no drag or keys.
className	string	—	Classes for the widget's root.