Loading craft...
Loading craft...
Analog + optional digital clock with mesh aesthetics, timezone support, and total control over ticks, hands, and overlays.
I saw a post of a clock design and thought of building a clock—why not? This component brings that inspiration to life with a fully customizable analog clock that supports multiple timezones, custom styling, and beautiful variants.
1import { Clock } from '@/craft/components/clock';23// Basic clock with mesh variant4<Clock variant="mesh" size={320} />56// Clock with timezone7<Clock8variant="default"9timezone="America/New_York"10showNumbers="cardinal"11/>1213// Fully customized clock14<Clock15variant="mesh"16size={200}17showNumbers="all"18rounded={1}19borderWidth={2}20borderColor="rgba(255,255,255,0.8)"21tickHourColor="rgba(255,255,255,0.8)"22handHourColor="#fff"23handSecondColor="#ff0000"24showDigital={{25 position: "center",26 uppercase: true,27 showTimezone: true28}}29/>
| Props | Description | Default |
|---|---|---|
variant | Visual style variant | "mesh" |
size | Clock diameter in pixels | 320 |
className | Additional CSS classes | - |
rounded | Border radius (0 = square, 1 = circle) | 1 |
borderWidth | Border width in pixels | 1 |
borderColor | Border color (CSS color value) | "rgba(255,255,255,0.12)" |
showNumbers | Which numbers to display: "all" for 1-12, "cardinal" for 12/3/6/9, array for custom hours, or false to hide | "cardinal" |
tickHourLengthPx | Hour tick length in pixels (at 320px design, scales automatically) | 10 |
tickMinuteLengthPx | Minute tick length in pixels (at 320px design, scales automatically) | 5 |
tickHourWidthPx | Hour tick width in pixels (at 320px design, scales automatically) | 2 |
tickMinuteWidthPx | Minute tick width in pixels (at 320px design, scales automatically) | 1 |
tickHourColor | Color for hour tick marks | "rgba(255,255,255,0.7)" |
tickMinuteColor | Color for minute tick marks | "rgba(255,255,255,0.35)" |
handHourColor | Color for the hour hand | "#fff" |
handMinuteColor | Color for the minute hand | "#fff" |
handSecondColor | Color for the second hand | "#fff" |
numberColor | Color for number labels | "rgba(255,255,255,0.75)" |
numberFontSizePx | Font size for numbers in pixels (at 320px design, scales automatically) | 12 |
timezone | IANA timezone identifier (e.g., "America/New_York", "Europe/London", "Asia/Tokyo"). If not provided, uses local time | - |
customTime | Custom Date object. If provided, clock shows this time (static). Overrides timezone | - |
showDigital | Digital time/day overlay. Can be boolean or object with position, uppercase, color, fontSizePx, and showTimezone options | false |
digitalClassName | Additional CSS classes for the digital overlay | - |