Simple Timer
A live clock with an analogue face and a light/dark toggle.
StarterWeb appTool2–4hAI-buildable 5/5no setup
Hand rotations are computed from the current time each tick, plus a theme toggle. Getting the hour hand to move continuously rather than jumping between hours is the detail that makes it look right.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 5
- An analogue clock face updates every second
- Hands are positioned by mapping time values to degrees
- The hour hand moves continuously, not in discrete jumps
- A toggle switches between light and dark themes
- A digital readout shows the date and time
The interesting part
- Continuous hour-hand rotation and clearing the tick interval on unmount
Once it works
- Add a stopwatch mode
- Add multiple timezone faces
Suggested stack
reacttypescripttailwinddate-fns