Analog Clock Screensaver

SVG analog clock screensaver with smooth hands motion.

Preview

Refinery

Move your mouse or press any key to exit the screensaver.

Installation

1. Run the following command in your terminal:

npx shadcn@latest add https://refinery.abhii.me/r/analog-clock-screensaver.json

API Reference

Component props
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.

Usage Recommendations

Choose a bold accent color for the second hand.

See the 'Usage Hints' section on the left to learn how to apply screensaver into your app.

You can also use it as your 404 page with some additions on top.

Design Notes

Clock face is drawn in SVG and refs are kept to the hands so their rotation can update directly. A useAnimationFrame loop calculates the current time and applies smooth rotation to the hour, minute, and second hands. The second hand moves continuously for a fluid feel, while the hour and minute hands update every second to keep the component light.