Analog Clock is a live-ticking clock face rendered entirely in CSS and React: a metallic bezel, a glass sheen that slides across the crystal, and hands that sweep smoothly using the visitor's system time rather than ticking in steps. It needs no external data source or dependency. Drop it into dashboards, lock screen mockups, or any product screenshot that needs a believable timepiece.
Installation
Copy and paste the following code into your project.
Unlock the full library
Get all pro blocks, components & illustrations, and production-ready Next.js + Tailwind templates.
Update the import paths to match your project setup.
Related blocks
- Mockup: Clerk Bento
A Clerk.com-inspired authentication bento grid — 11 hover-gated mockup cards arranged in a 3×4 bento layout with a wide API keys + CLI bottom row.
- Mockup: Code Diff
A terminal-style code diff viewer with syntax-highlighted add/del lines, staggered reveal animation, and a copy button.
- Mockup: Collab Cursors
Two named multiplayer cursors wandering a shared canvas on independent timelines, each selecting different shapes.
- Mockup: Command Palette
A simulated cursor opening a command palette, typing a query, and picking a result on a GSAP loop.
