An analog clock component that displays the current time for me. Built using AI tools to get my sea legs.
Design
Inspired by the Braun alarm clock and the iOS Clock app. I did shift colors to be closest Tailwind color variants.
Glass effects are layered with SVG gradients — a top-edge specular highlight, a subtle depth shadow, and a reflection overlay — to give the face a slight dome-like quality.
Tried to mimic quartz style second animation.
Variants
The component accepts a size prop with two options:
- md (default, 256px) — Full clock with hour numbers, tick marks, and all detail
- sm (128px) — Compact version that drops numbers and ticks
Both variants share the same SVG coordinate space (256x256) and animation script. Multiple instances on the same page animate independently via data- attribute selectors.
Dark Mode
In dark mode the face switches to a light color, hands invert, and the outer bezel and box-shadow adapt. The glass effect gradients are tuned separately for each mode — dark mode adds a top shadow and inner vignette instead of the bottom shadow used in light mode.
I choose to have dark mode be light and light mode be dark to increase contrast for the widget.
