Show the right time, branded your way - without slowing anything down.
Clocks on websites should feel trustworthy and professional - but too many are stuck in the past: they guess the time, drain phone batteries even when hidden, and look like they belong to another decade. Cool Clock 5 is a complete ground-up rewrite of the classic analog clock concept, built fresh for modern browsers and real-world needs.
Overview
Your visitors get dead-accurate time that matches your server, clocks that pause automatically when no one’s looking, and full branding control - so your site looks sharp, stays fast, and never embarrasses you.
Proof
Elegant, right out of the box
Clean lines, smooth sweeping hands, server-accurate time - no fuss, just quality.
Or make Cool Clock uniquely yours
Same great base, now with a RicheyWeb SVG logo placed naturally behind the hands - your brand integrated in seconds.
One glance shows the whole team across timezones - always correct, always professional.
How It Works
Cool Clock draws a smooth analog clock directly in the browser, like digital paint on canvas.
It pulls the real time from your server (not whatever the visitor’s device thinks), adds your logo or text behind the hands just like a real wall clock, and only animates when someone can actually see it.
That means beautiful motion when it matters, silence and zero battery drain when it doesn’t - simple, efficient, and way more polished than the old approaches.
Features
- Invisible efficiency - Stops animating the moment it scrolls off screen, saving battery and keeping your site lightning-fast\
- Server-accurate time - Ignores visitor device clocks that can be wrong; always shows the true time
- Any timezone you need - Display offices or clients in different cities with correct offsets and labels
- Brand it your way - Place text, emoji, image, or SVG logo behind the hands - looks like it belongs
- 27+ skins + visual editor - Start with a classic look or build your own live in the admin - no coding required
- AM/PM option - Add clean digital readout when you want it, without ruining the analog feel
- Responsive & smooth - Scales perfectly on phones, tablets, retina - 60fps only when visible
Nope! This new version is tiny, pauses off-screen, and smarter than the old versions based on Simon Baird's CoolClock. Yes! Cool Clock pulls time from server, not visitor's clock that might be wrong. Install in 2 minutes, visual editor lets you tweak live, no coding unless you want JSON fun. The Joomla 3 version is still available for download. Joomla 4-6 are supported by Cool Clock version 5 and up.Frequently Asked Questions:
Will this slow my site?
Is the time accurate?
Hard to set up/customize?
Works with my Joomla version?
Download
Technical Details
Under the Hood: Technical Details on ModernClock v2.0.0
Damn, this rewrite is a beast - I took Simon Baird's 2008 canvas masterpiece (shoutout to the OG CoolClock for inspiring the analog vibe) and rebuilt it from scratch in pure vanilla JavaScript. No dependencies, no bloat, just modern browser APIs doing heavy lifting. The original was solid for its time, but it ran on setInterval loops that chewed CPU constantly, didn't handle visibility or resizing gracefully, and lacked real-world features like accurate syncing or branding. This version? It's lean, performant, and packed with 2026-ready tricks that make it feel alive without killing resources. Let's break it down.
Core Architecture
- Pure Canvas Rendering with requestAnimationFrame: Every tick uses rAF for buttery-smooth 60fps animation - only when visible and needed. Original used fixed-interval timers that redrew even in background tabs; here, we throttle to actual visibility, dropping CPU usage to near-zero off-screen. Draw order is optimized: clear → background/face → logo (behind hands for that real-clock depth) → indicators → hands → center dot. No overdraw waste.
- Instance Management: Static Map tracks all clocks by canvas ID. Easy to create, update, or destroy multiple on a page - great for Joomla modules. Auto-init scans for data attributes or Joomla options to spin up instances without manual calls.
- Responsive Design Built-In: Canvas auto-scales to container size using aspect-ratio CSS and ResizeObserver (polyfill-friendly). DPR-aware for retina sharpness. Original was fixed-size only; this adapts on fly, no redraw lag during window resizes.
Performance Optimizations
- IntersectionObserver Integration: Pauses animation loop when clock scrolls out of view. Massive win for long pages or mobiles - original ran forever, draining batteries. We check DOM presence too, so hidden tabs/accordions don't waste cycles.
- Debounce-Free Resizing: ResizeObserver triggers instant canvas updates without manual debouncing. Scale factor recalcs ensure pixel-perfect hands at any size.
- Offscreen Efficiency: No workers needed yet (kept it simple), but the draw loop is so tight it handles 60fps on low-end devices. Tested with multiple instances: negligible impact vs. original's constant polling.
Time Accuracy Features
- NTP-Like Sync: Fetches from reliable APIs (timeapi.io, worldtimeapi.org) or custom Date header URLs (e.g., your server). Calculates offset from local time, caches in cookies for 24h. Retries with backoff on fails - original relied on client Date(), which drifts or lies. This keeps global teams in sync without external libs.
- Timezone Offsets: gmtOffset param shifts to any zone (e.g., LA -8, Dallas -6, NY -5). Combines with sync for dead-accurate multi-clock displays.
- Smooth vs. Ticking Seconds: Toggle smoothSecondHand for fluid motion (adds ms/1000 to seconds) - original was ticking-only, felt jerky.
Customization and Branding
- Logo System: Draw text/emoji/symbol, image URLs (with CORS handling), or raw SVG (base64-encoded for safety) behind the hands. Position, scale, opacity, rotation - all configurable. Original had zilch; this turns clocks into branded gauges (e.g., company logo + city emoji).
- 27+ Skins + Custom JSON: Preserved classics like swissRail/chunkySwiss, added modern ones (neon, ocean, luxury). Custom skins via object: define borders, indicators, hands, decorations. Visual editor (not in code, but implied for Joomla) exports JSON for easy tweaks.
- AM/PM Display: Optional text at 6 o'clock position, styled from skin or defaults. Clean integration without cluttering the face.
Events and Extensibility
- Callbacks: onTick for per-second hooks, onNTPSync/onNTPError for time events. Update options live (e.g., switch skins) without full reload.
- Error Handling: Graceful fallbacks - bad logos? Skip. No observer support? Run anyway. Console warns only when needed.
Compared to Simon's original: That was ~1k lines of 2008 JS with basic drawing and a few skins - innovative then, but power-hungry and rigid now. This v2 is a full rewrite (zero original code except skin data for nostalgia), clocking in optimized for perf: under 10k minified, no jQuery/proto pollution, modern APIs only. It's not just a clock; it's a framework for analog displays that won't bog down your site.
