components / clock
clock.
live clock — thin-stroke analog face, tabular-nums digital readout, or both. any iana time zone via intl, optional sweep second hand. ssr-safe: renders a stable midnight form until mounted.
00:00:00
sfo00:00:00
lhr00:00:00
icn12:00:00 amGMT+9
installation
bunx @justin06lee/chrome@latest add clockprops
| name | type | default | description |
|---|---|---|---|
| variant | 'analog' | 'digital' | 'both' | 'analog' | 'both' stacks the face over the readout. |
| timeZone | string | - | iana zone, e.g. "Asia/Seoul". omit for the viewer's local zone. |
| showSeconds | boolean | true | second hand and :ss in the readout. |
| hour12 | boolean | false | 12-hour readout with an am/pm suffix. |
| size | number | 160 | analog face edge in px; the digital readout is sized by className. |
| ticks | boolean | true | hour tick marks around the face. |
| sweep | boolean | false | sweep the second hand continuously instead of stepping. costs a raf loop; ignored under prefers-reduced-motion. |
| showZone | boolean | false | zone abbreviation under the readout, e.g. "KST". |
| accent | string | - | css color for the second hand. defaults to the muted white step. |
| className | string | - |