KQ-1200 · SUNDIAL/HOUR
Sundial
An inline loader drawn as a garden sundial seen from above. The time of day — the progress, or a looping day — sets the gnomon's shadow by the real horizontal-dial formula, so hour lines crowd towards noon, and the sun's altitude sets its length: long and faint at morning and evening, short and dark at noon; a small sun rides the rim opposite, lighting that side of the plate, and the light warms from a cool dawn to a gold evening before a short dusk. With progress the time follows it on the drift spring and rests in the evening at 1. Dragging on the dial walks the shadow — a flick swing to the finger, then 1:1, ticking at every hour line it crosses — and letting go drifts it back to the real hour, or lets the looping day carry on from there; Left and Right walk it an hour at a time on glide.
Payout arrives by eveningDrag on the dial, or use the arrow keys, to walk the shadow through the hours.
settling · 6 am
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/sundial-hour
Props
- label
- string
- default "Loading"
- What is waiting on the day: the loader's accessible name, shown beside the dial unless hideLabel.
- hideLabel
- boolean
- default false
- Keep the label for assistive technology only.
- size
- number
- default 24
- The glyph's box in px, crisp from 16 to 64. Below 24 only the plate, fin, shadow and sun; below 44 plain hour lines with no numerals, ticks or penumbra.
- speed
- number
- default 1
- How fast the looping day passes (about eight seconds and a short dusk at 1), 0.5 to 2.
- progress
- number
- default —
- How far through the day, 0 (06:00) to 1 (18:00); the label becomes a progressbar and the dial rests in the evening light at 1. Omitted, a day passes on a loop.
- dial
- "stone" | "brass" | "slate"
- default "stone"
- The plate: weathered stone, polished brass or dark slate with light engraving, as fixed pigments that read the same in both themes.
- numerals
- "roman" | "arabic" | "ticks"
- default "roman"
- How the quarters are marked round the rim at 44 px and up: VI IX XII III VI, 6 9 12 3 6, or longer ticks.
- sound
- boolean
- default false
- A tick for every hour line the shadow crosses while the visitor walks it, bright in the morning and low in the evening, loudest at noon. The running day is silent.
- disabled
- boolean
- default false
- The day keeps passing but the shadow cannot be walked.
- className
- string
- default —
- Classes for the root, an inline-flex row of the dial and its label.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Loading" | What is waiting on the day: the loader's accessible name, shown beside the dial unless hideLabel. |
| hideLabel | boolean | false | Keep the label for assistive technology only. |
| size | number | 24 | The glyph's box in px, crisp from 16 to 64. Below 24 only the plate, fin, shadow and sun; below 44 plain hour lines with no numerals, ticks or penumbra. |
| speed | number | 1 | How fast the looping day passes (about eight seconds and a short dusk at 1), 0.5 to 2. |
| progress | number | — | How far through the day, 0 (06:00) to 1 (18:00); the label becomes a progressbar and the dial rests in the evening light at 1. Omitted, a day passes on a loop. |
| dial | "stone" | "brass" | "slate" | "stone" | The plate: weathered stone, polished brass or dark slate with light engraving, as fixed pigments that read the same in both themes. |
| numerals | "roman" | "arabic" | "ticks" | "roman" | How the quarters are marked round the rim at 44 px and up: VI IX XII III VI, 6 9 12 3 6, or longer ticks. |
| sound | boolean | false | A tick for every hour line the shadow crosses while the visitor walks it, bright in the morning and low in the evening, loudest at noon. The running day is silent. |
| disabled | boolean | false | The day keeps passing but the shadow cannot be walked. |
| className | string | — | Classes for the root, an inline-flex row of the dial and its label. |