Le pitch
Radial Clock est une horloge qui représente le temps sous forme d’anneaux concentriques. Sept arcs progressent simultanément : secondes, minutes, heures, jour de la semaine, semaine, mois, année. Les cycles rapides au centre, les cycles lents à l’extérieur — ou l’inverse, selon vos préférences.
Essayer : presque.cool/radial-clock/
Pourquoi ce projet
Au début des années 2000, j’utilisais un économiseur d’écran appelé Polar Clock. Des anneaux concentriques qui se remplissaient au rythme du temps. Simple. Hypnotique. Je ne l’ai jamais oublié.
En 2016, j’ai voulu recréer cette fascination pour le temps visualisé. Pas une horloge à aiguilles, pas des chiffres qui défilent — quelque chose de plus organique, où l’on voit les cycles s’imbriquer les uns dans les autres.
Ce qui le rend unique
Le temps comme système d’anneaux imbriqués. Sept cercles tournent à des vitesses différentes :
- Secondes — le cycle le plus rapide, au centre
- Minutes → Heures → Jour de la semaine
- Semaine → Mois → Année — le plus lent, à l’extérieur
Chaque anneau progresse de façon fluide (pas de “tick” discret). Les couleurs changent avec la progression — optionnellement. On peut inverser l’ordre des anneaux, afficher ou masquer les labels, choisir son thème.
L’interface est volontairement épurée. L’horloge occupe tout l’écran. Le temps est au centre.
Un terrain de jeu technique
Ce projet a été mon laboratoire d’expérimentation pendant 10 ans. Chaque version majeure correspondait à une envie d’appliquer ou tester quelque chose de nouveau :
- v1 (2016) : Vanilla JS, premiers pas avec Canvas 2D et requestAnimationFrame
- v2 (2020) : Amélioration responsive, adaptation mobile
- v3 (2025) : Ajout des options (thèmes, langue, couleurs dynamiques, sens des anneaux)
- v4 (2026) : Refonte complète en Preact/TypeScript
Le défi principal : calculer la progression de chaque anneau de façon fluide. Les secondes sont simples (seconds + milliseconds/1000), mais la semaine de l’année ou la progression de l’année demandent plus de réflexion pour éviter les sauts visuels.
Stack technique
- Preact + TypeScript
- Vite comme bundler
- Canvas 2D pour le rendu (60fps requestAnimationFrame)
- Zustand pour le state management
- Tailwind CSS
- PWA — installable, offline
- CSP — Content-Security-Policy avec hashes auto-générés
Évolutions
| Date | Version | Description |
|---|---|---|
| Jan 2016 | 1.0 | Version initiale — Vanilla JS, Canvas 2D, 7 anneaux |
| Avril 2020 | 2.0 | Amélioration responsive design |
| Juil 2025 | 3.0 | Options — Thèmes, langue, couleurs dynamiques, sens des anneaux |
| Jan 2026 | 4.0 | Refonte Preact — TypeScript, Zustand, PWA, tooltips interactifs |
Bilan
Durée : environ 1-2 jours par version, sur 10 ans.
Ce que j’ai appris :
- Canvas 2D et l’animation fluide à 60fps
- La valeur d’un projet “terrain de jeu” — pas de pression, juste un espace pour expérimenter
Ce que je referais pareil :
- Garder un projet simple sur le long terme comme laboratoire technique
Ce que je changerais :
- Explorer la possibilité d’en faire un vrai économiseur d’écran natif (Electron ?)
The pitch
Radial Clock is a clock that represents time as concentric rings. Seven arcs progress simultaneously: seconds, minutes, hours, day of week, week, month, year. Fast cycles in the center, slow cycles on the outside — or reversed, as you prefer.
Try it: presque.cool/radial-clock/
Why This Project
In the early 2000s, I used a screensaver called Polar Clock. Concentric rings filling up with time. Simple. Hypnotic. I never forgot it.
In 2016, I wanted to recreate that fascination with visualized time. Not a clock with hands, not scrolling digits — something more organic, where you see cycles nesting within each other.
What Makes It Unique
Time as a system of nested rings. Seven circles rotate at different speeds:
- Seconds — the fastest cycle, at the center
- Minutes → Hours → Day of week
- Week → Month → Year — the slowest, on the outside
Each ring progresses smoothly (no discrete “tick”). Colors change with progress — optionally. You can reverse the ring order, show or hide labels, choose your theme.
The interface is intentionally minimal. The clock fills the screen. Time is at the center.
A Technical Playground
This project has been my experimentation lab for 10 years. Each major version corresponded to something new I wanted to try:
- v1 (2016): Vanilla JS, first steps with Canvas 2D and requestAnimationFrame
- v2 (2020): Responsive improvements, mobile adaptation
- v3 (2025): Options added (themes, language, dynamic colors, ring direction)
- v4 (2026): Complete Preact/TypeScript rewrite
The main challenge: calculating each ring’s progress smoothly. Seconds are simple (seconds + milliseconds/1000), but week of year or year progress require more thought to avoid visual jumps.
Tech Stack
- Preact + TypeScript
- Vite as bundler
- Canvas 2D for rendering (60fps requestAnimationFrame)
- Zustand for state management
- Tailwind CSS
- PWA — installable, offline
- CSP — Content-Security-Policy with auto-generated hashes
Evolution
| Date | Version | Description |
|---|---|---|
| Jan 2016 | 1.0 | Initial version — Vanilla JS, Canvas 2D, 7 rings |
| Apr 2020 | 2.0 | Responsive design improvements |
| July 2025 | 3.0 | Options — Themes, language, dynamic colors, ring direction |
| Jan 2026 | 4.0 | Preact rewrite — TypeScript, Zustand, PWA, interactive tooltips |
Retrospective
Duration: about 1-2 days per version, over 10 years.
What I learned:
- Canvas 2D and smooth 60fps animation
- The value of a “playground” project — no pressure, just space to experiment
What I’d do the same:
- Keep a simple long-term project as a technical lab
What I’d change:
- Explore making it a real native screensaver (Electron?)