A clean analog clock design with smooth hand animations.
npx shadcn@latest add @refinery/analog-clock-screensaver| Name | Type | Description |
|---|---|---|
| title | string | Label shown below the clock face. |
| className | string | Additional CSS classes for the wrapper. |
| accentColor | string | Accent color for the second hand and center dot. |
| backgroundClassName | string | Background color class for the screen. |
The clock is built using SVG for crisp, scalable graphics. We have three hands (hour, minute, second) that are represented as SVG lines. We use 'useRef' to get references to each hand element so we can update their positions directly without causing React re-renders. The main animation loop is set up with 'useEffect' and 'requestAnimationFrame' to update the clock every second. In each frame, we calculate the current time and determine the appropriate rotation for each hand based on the hours, minutes, and seconds. The rotation is applied using the 'transform' attribute on each hand's SVG line element. The clock face includes a subtle circular border and a background color that can be customized via props. The entire component is styled to be centered and responsive, making it suitable as a screen saver or a decorative element on a dashboard.