ChronosClock
Two Time Modes Switch between live real-time tracking with smooth 50ms hand movement, and a custom start time that ticks forward from any hour, minute, and second you define — all from the property panel, no code touched.
Fully Themeable Three color pickers — face, hand, and accent — give you complete control over the look. Go stark black and white, match your brand palette, or push it into warm gold-on-charcoal territory. The component is built to adapt.
Crisp at Any Size Drawn entirely in SVG, Meridian scales perfectly from a compact widget to a full-screen hero element without a single blurry edge.
Layered Ambient Detail Two counter-rotating dashed rings, a slow pulsing glow, fine tick marks, and subtle crosshair accents build a sense of depth and quiet motion behind the hands — giving the face life even when nothing is being read.
Toggleable Elements Flip the second hand and digital readout on or off with a single switch. Keep it minimal for editorial layouts, or show everything for dashboard and utility use cases.
Zero Configuration Pure React and inline SVG. No external libraries, no font imports, no setup steps. Drop it onto the canvas and it runs immediately.
Property Controls
Custom time toggle
Hours / Minutes / Seconds (visible when custom time is on)
Second hand on/off
Digital readout on/off
Face color
Hand color
Accent color
Viper Guy
