KQ-1217 · SUMMIT/STEPS

Summit Steps

A step count drawn as a climb: the trail up the mountain is the day's goal, and a small walker stands on it at the share walked so far, legs swinging from the distance covered rather than the clock, so they walk while they move and stand still when they stop. Camps pop up on the recoil spring at each quarter of the goal and the summit flag is hoisted on glide and waves itself out; dragging along the trail scrubs back through the day 1:1, rubber-banding past now, and letting go lands on the nearest hour on the glide spring with the release velocity. The picture is a slider in time: arrow keys step an hour, Page keys three, Home goes to midnight, and End or Escape back to now.

KQ-1217 · SUMMIT/STEPS

5,780

of 10,000 · 58%

live 14:20 · 5,780 steps · 58%

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/summit-steps

Props

hours: number[]; default —; Steps counted in each hour of the day so far, midnight first.
now: Date | number; default —; The moment the day has reached. 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 whole hour shown (the steps taken by that hour), or null to follow now.
onValueChange: (hour: number | null) => void; default —; Fires from the drag, tap, key or Now press that changed the hour shown.
goal: number; default 10000; The day's goal in steps: the whole trail, valley to summit. Camps sit at each quarter of it.
terrain: "alpine" | "desert" | "coast"; default "alpine"; The landscape and the trail up it: a snow-capped peak with switchbacks, a terracotta butte over dunes, or a grass headland above the sea.
label: string; default "Today"; The widget's name, shown over the picture and used in the slider's name.
sound: boolean; default false; A tick for each hour and camp a visitor's scrub passes and a chime on the summit. The count growing on its own is silent.
disabled: boolean; default false; Keeps showing the count, but takes no drag, tap or keys.
className: string; default —; Classes for the tile.

Prop	Type	Default	Description
hours	number[]	—	Steps counted in each hour of the day so far, midnight first.
now	Date \| number	—	The moment the day has reached. 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 whole hour shown (the steps taken by that hour), or null to follow now.
onValueChange	(hour: number \| null) => void	—	Fires from the drag, tap, key or Now press that changed the hour shown.
goal	number	10000	The day's goal in steps: the whole trail, valley to summit. Camps sit at each quarter of it.
terrain	"alpine" \| "desert" \| "coast"	"alpine"	The landscape and the trail up it: a snow-capped peak with switchbacks, a terracotta butte over dunes, or a grass headland above the sea.
label	string	"Today"	The widget's name, shown over the picture and used in the slider's name.
sound	boolean	false	A tick for each hour and camp a visitor's scrub passes and a chime on the summit. The count growing on its own is silent.
disabled	boolean	false	Keeps showing the count, but takes no drag, tap or keys.
className	string	—	Classes for the tile.